基于jQuery的页面便签插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

color-sticker是一款基于jQuery的页面便签插件。它是一个可以任意拖拽，保存，删除，导入和定制颜色的页面便签插件。主要的功能点有以下几点：

点击右上方的蓝色+按钮，可以在页面中添加一个便签,用户可以在便签中输入需要记录的文字。
点击便签右下角的保存按钮，便签里的内容以及便签的位置可以通过回调函数持久化到文件或数据库。
点击便签右上方的关闭按钮可以关闭便签,回调函数会得到该便签的stickerId。
按住便签上方的胶带，可以在屏幕上拖拽便签。
插件支持通过数组格式导入，将保存的便签还原到页面。

使用方法

在页面中引入样式文件color-sticker.css和jquery.min.js、colorsticker.js文件。

<link rel="stylesheet" href="css/color-sticker.css">
<script src="jquery.min.js"></script>             
<script src="colorsticker.js"></script>

初始化插件

采用默认配置引入便签插件，页面加载后，页面右上方会出现添加便签的按钮。

$('body').sticker();

配置参数

color-sticker页面便签插件的可用配置参数如下：

$('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);
  }
});

color：便签默认是黄色，可以选择pink,green,blue,purple。
width：便签的宽度，默认是200px。
height：便签的高度，默认是200px。
saveStickerCallback：保存便签的回调方法，参数是sticker对象，包括便签的位置和内容信息。
closeStickerCallback：删除便签的回调方法，参数是便签的stickerId。

导入便签

导入便签的格式如下：

/**导入的便签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);//将导入的便签数组作为插件的第二个参数