亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

基于jQuery的頁(yè)面便簽插件--一個(gè)可以任意拖拽，保存，刪除，導(dǎo)入，定制顏色的頁(yè)面便簽

HollisChuang / 1952人閱讀

摘要：去年寫(xiě)的一個(gè)插件，前幾天看還挺好玩的?？梢栽陧?yè)面上給用戶(hù)提供任意拖拽的便簽功能，并且便簽可以保存和導(dǎo)出之前保存過(guò)的便簽。希望你的應(yīng)用可以用得到。

去年寫(xiě)的一個(gè)插件，前幾天看還挺好玩的?？梢栽陧?yè)面上給用戶(hù)提供任意拖拽的便簽功能，并且便簽可以保存和導(dǎo)出之前保存過(guò)的便簽。希望你的web應(yīng)用可以用得到。

這里是demo
這里是github

插件功能

點(diǎn)擊右上方的藍(lán)色+按鈕，可以在頁(yè)面中添加一個(gè)便簽,用戶(hù)可以在便簽中輸入需要記錄的文字

點(diǎn)擊便簽右下角的保存按鈕，便簽里的內(nèi)容以及便簽的位置可以通過(guò)回調(diào)函數(shù)持久化到文件或數(shù)據(jù)庫(kù)

點(diǎn)擊便簽右上方的關(guān)閉按鈕可以關(guān)閉便簽,回調(diào)函數(shù)會(huì)得到該便簽的stickerId

按住便簽上方的膠帶，可以在屏幕上拖拽便簽

插件支持通過(guò)數(shù)組格式導(dǎo)入，將保存的便簽還原到頁(yè)面

使用插件

在html代碼中引用colorsticker.js和color-sticker.css文件(引入插件相關(guān)的保存圖標(biāo))

初始化插件

$("body").sticker({
    color:"purple", //便簽?zāi)J(rèn)是黃色，可以選擇pink,green,blue,purple
    width:"200px",  //便簽的寬度，默認(rèn)是200px
    height:"300px", //便簽的高度，默認(rèn)是200px
    saveStickerCallback: function(sticker){   //保存便簽的回調(diào)方法，參數(shù)是sticker對(duì)象，包括便簽的位置和內(nèi)容信息
        alert("sticker info: left " + sticker.left + ",top " + sticker.top + ",content " + sticker.content);
    }，
    closeStickerCallback： function(stickerId){  //刪除便簽的回調(diào)方法，參數(shù)是便簽的stickerId
        alert(stickerId);
    }
});

導(dǎo)入便簽的格式

 /**導(dǎo)入的便簽Object有以下屬性：
     *stickerId--用戶(hù)自定義的便簽Id,用于刪除便簽后便于同時(shí)刪除后臺(tái)數(shù)據(jù)
     *left--便簽與瀏覽器左側(cè)的距離
     *top--便簽與瀏覽器上方的邊距
     *content--便簽的內(nèi)容    
     *將便簽對(duì)象存在一個(gè)數(shù)組中導(dǎo)入
    **/

var stickers = [{stickerId:"2",left:"1000px", top:"100px", content:"I"m Ashley"s cat"}];
$("body").sticker({
    color:"purple", //便簽?zāi)J(rèn)是黃色，可以選擇pink,green,blue,purple
    width:"200px",  //便簽的寬度
    height:"300px", //便簽的高度
    saveStickerCallback: function(sticker){   //保存便簽的回調(diào)方法，參數(shù)是sticker對(duì)象，包括便簽的位置和內(nèi)容信息
        alert("sticker info: left " + sticker.left + ",top " + sticker.top + ",content " + sticker.content);
    }，
    closeStickerCallback： function(stickerId){  //刪除便簽的回調(diào)方法，參數(shù)是便簽的stickerId
        alert(stickerId);
    }
}，stickers);//將導(dǎo)入的便簽數(shù)組作為插件的第二個(gè)參數(shù)

最后推薦下輪子工廠--一個(gè)分享優(yōu)秀vue,angular組件的網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83992.html

相關(guān)文章

  • PHP+MySQL+jQueryUI完美便簽條

    摘要：過(guò)濾標(biāo)簽，并轉(zhuǎn)義特殊字符內(nèi)容長(zhǎng)度為字符之間姓名長(zhǎng)度為字符之間堆疊順序值出錯(cuò)了演示下載地址 演示下載地址：http://www.erdangjiade.com/js...效果圖：showImg(https://segmentfault.com/img/bVK9tK?w=567&h=326); 完整代碼如下： 首先我們引入jQuery庫(kù)、拖動(dòng)插件jqueryui及彈出層插件fancybox...

    ShevaKuilin 評(píng)論0 收藏0

  • PHP+MySQL+jQueryUI完美便簽條

    摘要：過(guò)濾標(biāo)簽，并轉(zhuǎn)義特殊字符內(nèi)容長(zhǎng)度為字符之間姓名長(zhǎng)度為字符之間堆疊順序值出錯(cuò)了演示下載地址 演示下載地址：http://www.erdangjiade.com/js...效果圖：showImg(https://segmentfault.com/img/bVK9tK?w=567&h=326); 完整代碼如下： 首先我們引入jQuery庫(kù)、拖動(dòng)插件jqueryui及彈出層插件fancybox...

    wenzi 評(píng)論0 收藏0

  • PHP+MySQL+jQueryUI完美便簽條

    摘要：過(guò)濾標(biāo)簽，并轉(zhuǎn)義特殊字符內(nèi)容長(zhǎng)度為字符之間姓名長(zhǎng)度為字符之間堆疊順序值出錯(cuò)了演示下載地址 演示下載地址：http://www.erdangjiade.com/js...效果圖：showImg(https://segmentfault.com/img/bVK9tK?w=567&h=326); 完整代碼如下： 首先我們引入jQuery庫(kù)、拖動(dòng)插件jqueryui及彈出層插件fancybox...

    cikenerd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<