基于jQuery的页面便签插件--一个可以任意拖拽，保存，删除，导入，定制颜色的页面便签

HollisChuang 发布于2019-08-20 18:00 / 1911人阅读

摘要：去年写的一个插件，前几天看还挺好玩的。可以在页面上给用户提供任意拖拽的便签功能，并且便签可以保存和导出之前保存过的便签。希望你的应用可以用得到。

去年写的一个插件，前几天看还挺好玩的。可以在页面上给用户提供任意拖拽的便签功能，并且便签可以保存和导出之前保存过的便签。希望你的web应用可以用得到。

这里是demo
这里是github

插件功能

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

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

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

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

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

使用插件

在html代码中引用colorsticker.js和color-sticker.css文件(引入插件相关的保存图标)

初始化插件

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

导入便签的格式

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

最后推荐下轮子工厂--一个分享优秀vue,angular组件的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83992.html

PHP+MySQL+jQueryUI完美便签条

摘要：过滤标签，并转义特殊字符内容长度为字符之间姓名长度为字符之间堆叠顺序值出错了演示下载地址演示下载地址：http://www.erdangjiade.com/js...效果图：showImg(https://segmentfault.com/img/bVK9tK?w=567&h=326); 完整代码如下：首先我们引入jQuery库、拖动插件jqueryui及弹出层插件fancybox...

cikenerd 2019-06-27 15:52 评论0 收藏0
PHP+MySQL+jQueryUI完美便签条

摘要：过滤标签，并转义特殊字符内容长度为字符之间姓名长度为字符之间堆叠顺序值出错了演示下载地址演示下载地址：http://www.erdangjiade.com/js...效果图：showImg(https://segmentfault.com/img/bVK9tK?w=567&h=326); 完整代码如下：首先我们引入jQuery库、拖动插件jqueryui及弹出层插件fancybox...

ShevaKuilin 2019-08-20 15:20 评论0 收藏0
PHP+MySQL+jQueryUI完美便签条

摘要：过滤标签，并转义特殊字符内容长度为字符之间姓名长度为字符之间堆叠顺序值出错了演示下载地址演示下载地址：http://www.erdangjiade.com/js...效果图：showImg(https://segmentfault.com/img/bVK9tK?w=567&h=326); 完整代码如下：首先我们引入jQuery库、拖动插件jqueryui及弹出层插件fancybox...

wenzi 2019-08-01 16:34 评论0 收藏0