jQuery技术

基于jQuery的页面便签插件

字号+ 作者:H5之家 来源:H5之家 2016-12-06 13:02 我要评论( )

简要教程 color-sticker是一款基于jQuery的 页面便签插件 。它是一个可以任意拖拽,保存,删除,导入和定制颜色的页面便签插件。主要的功能点有以下几点: 点击右上方的蓝色+按钮,可以在页面中添加一个便签,用户可以在便签中输入需要记录的文字。 点击便签


       简要教程

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

点击右上方的蓝色+按钮,可以在页面中添加一个便签,用户可以在便签中输入需要记录的文字。

点击便签右下角的保存按钮,便签里的内容以及便签的位置可以通过回调函数持久化到文件或数据库。

点击便签右上方的关闭按钮可以关闭便签,回调函数会得到该便签的stickerId。

按住便签上方的胶带,可以在屏幕上拖拽便签。

插件支持通过数组格式导入,将保存的便签还原到页面。

使用方法

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

初始化插件

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

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


       原文链接:

原作者:Ashley Lv

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • snabbt.js 强大的jQuery动画库插件 -HTML5功能

    snabbt.js 强大的jQuery动画库插件 -HTML5功能

    2016-01-19 11:05

  • jQuery超酷页面树叶飘落装饰特效插件 -HTML5功能

    jQuery超酷页面树叶飘落装饰特效插件 -HTML5功能

    2015-11-18 13:46

  • HTML5文件上传组件美化jQuery插件 -HTML5功能

    HTML5文件上传组件美化jQuery插件 -HTML5功能

    2015-11-15 10:53

  • jQuery实用产品图片放大镜插件 -HTML5功能

    jQuery实用产品图片放大镜插件 -HTML5功能

    2015-11-02 11:08

网友点评