基于jQuery的頁面便簽插件--一個可以任意拖拽，保存，刪除，導入，定制顏色的頁面便簽

HollisChuang 發布于2019-08-20 18:00 / 1890人閱讀

摘要：去年寫的一個插件，前幾天看還挺好玩的。可以在頁面上給用戶提供任意拖拽的便簽功能，并且便簽可以保存和導出之前保存過的便簽。希望你的應用可以用得到。

去年寫的一個插件，前幾天看還挺好玩的。可以在頁面上給用戶提供任意拖拽的便簽功能，并且便簽可以保存和導出之前保存過的便簽。希望你的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組件的網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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