插件功能
- 点击右上方的蓝色+按钮,可以在页面中添加一个便签,用户可以在便签中输入需要记录的文字
- 点击便签右下角的保存按钮,便签里的内容以及便签的位置可以通过回调函数持久化到文件或数据库
- 点击便签右上方的关闭按钮可以关闭便签,回调函数会得到该便签的stickerId
- 按住便签上方的胶带,可以在屏幕上拖拽便签
- 插件支持通过数组格式导入,将保存的便签还原到页面
使用插件
1. 在html代码中引用colorsticker.js和color-sticker.css文件(引入插件相关的保存图标)
<link rel="stylesheet" type="text/css" href="css/color-sticker.css">
<script type="text/javascript" src="js/colorsticker.js"></script>
2. 初始化插件
$('body').sticker(); //采用默认配置引入便签插件,页面加载后,页面右上方会出现添加便签的按钮
3. 插件配置
$('body').sticker({
color:'purple', //便签默认是黄色,可以选择pink,green,blue,purple
width:'200px', //便签的宽度,默认是200px
height:'300px', //便签的高度,默认是200px
saveStickerCallback: function(sticker){ //保存便签的回调方法,参数是sticker对象,包括便签的位置和内容信息
alert('sticker info: left ' + sticker.left + ',top ' + sticker.top + ',content ' + sticker.content);
},
closeStickerCallback: function(stickerId){ //删除便签的回调方法,参数是便签的stickerId
alert(stickerId);
}
});
3. 导入便签的格式
/**导入的便签Object有以下属性:
*stickerId--用户自定义的便签Id,用于删除便签后便于同时删除后台数据
*left--便签与浏览器左侧的距离
*top--便签与浏览器上方的边距
*content--便签的内容
*将便签对象存在一个数组中导入
**/
var stickers = [{stickerId:'2',left:'1000px', top:'100px', content:'I\'m Ashley\'s cat'}];
$('body').sticker({
color:'purple', //便签默认是黄色,可以选择pink,green,blue,purple
width:'200px', //便签的宽度
height:'300px', //便签的高度
saveStickerCallback: function(sticker){ //保存便签的回调方法,参数是sticker对象,包括便签的位置和内容信息
alert('sticker info: left ' + sticker.left + ',top ' + sticker.top + ',content ' + sticker.content);
},
closeStickerCallback: function(stickerId){ //删除便签的回调方法,参数是便签的stickerId
alert(stickerId);
}
},stickers);//将导入的便签数组作为插件的第二个参数