欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery.picsign圖片標(biāo)注組件實(shí)例詳解

 更新時(shí)間：2018年02月02日 08:53:52   作者：ArtlessBruin  
這篇文章主要介紹了jquery.picsign 自己封裝的第一個(gè)開(kāi)源組件,需要的朋友可以參考下

經(jīng)過(guò)幾天的嘗試和學(xué)習(xí)，封裝了自己的第一個(gè)js組件,有很多不足之處還請(qǐng)賜教。

因?yàn)橐恍I(yè)務(wù)需求，需要給圖片添加一些標(biāo)注，從網(wǎng)上找了一些但都不能滿足需求，并且存在一些bug，坑太多

因此就有想法自己封裝一個(gè)，學(xué)習(xí)了其他類似組件的實(shí)現(xiàn)思路，以及js組件的開(kāi)發(fā)思路，開(kāi)發(fā)了jquery.picsign組件

jQuery圖片標(biāo)注組件（jquery.picsign）

在線演示：http://artlessbruin.gitee.io/picsign/

gitee：https://gitee.com/ArtlessBruin/PicSign

1. 組件依賴

jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

bootstrap

<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

layer

<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>

webui-popover

<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

2. 引用組件文件

<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery.picsign.js"></script>

3. 使用

在頁(yè)面中加入一個(gè)DIV

<div id="picsign"></div>

初始化組件

$("#picsign").picsign(option);
//option為組件參數(shù)，詳細(xì)說(shuō)明見(jiàn)option參數(shù)說(shuō)明

option參數(shù)說(shuō)明

var option={
 picurl: null,//圖片地址
 signdata: [],//初始數(shù)據(jù),詳細(xì)說(shuō)明參見(jiàn)基本數(shù)據(jù)格式
 editable: {//是否可編輯(默認(rèn)可編輯 設(shè)置為false則禁用所有編輯)
 add: true,//是否可添加
 update: true,//是否可修改
 del: true,//是否可刪除
 move: true//是否可移動(dòng)
 },
 signclass: 'signdot',//標(biāo)注點(diǎn)樣式
 popwidth: 400,//標(biāo)注內(nèi)容顯示窗口寬
 popheight: 247,//標(biāo)注內(nèi)容顯示窗口高
 inputwidth: 400,//標(biāo)注內(nèi)容編輯窗口寬
 inputheight: 247,//標(biāo)注內(nèi)容編輯窗口高
 beforeadd: function (data) {//在添加保存前執(zhí)行的方法，返回false阻斷添加
 },
 onadd: function (data) {//添加完成執(zhí)行的方法
 },
 beforeupdate: function (data) {//在修改保存前執(zhí)行的方法，返回false阻斷修改
 },
 onupdate: function (data) {//修改完成執(zhí)行的方法
 },
 beforedel: function (data) {//在刪除保存前執(zhí)行的方法，返回false阻斷刪除
 },
 ondel: function (data) {//刪除完成執(zhí)行的方法
 }
};

基本數(shù)據(jù)格式

[{
 left:'50%',
 top:'50%',
 msg:'這是標(biāo)注信息',
 signid:'這是標(biāo)注唯一標(biāo)識(shí)符，用戶無(wú)需賦值，與組件邏輯相關(guān)，請(qǐng)不要使用此關(guān)鍵字'
}]
  • 用戶添加的數(shù)據(jù)中必須包含left、top、msg屬性
  • 用戶可自行擴(kuò)展其他屬性
  • 特殊說(shuō)明：請(qǐng)不要添加和使用signid關(guān)鍵字

方法調(diào)用

$("#picsign").picsign('functionName',parameter);
//functionName為方法名稱，parameter為方法參數(shù)，詳細(xì)說(shuō)明參見(jiàn)方法說(shuō)明

方法說(shuō)明

獲取標(biāo)注數(shù)據(jù)

方法名稱：getData

參數(shù)：無(wú)

$("#picsign").picsign('getData');

添加標(biāo)注數(shù)據(jù)

方法名稱：addSign

參數(shù)：基本數(shù)據(jù)Json,是否觸發(fā)事件（默認(rèn)為true）

$("#div_picsign").picsign("addSign",
 [{ left: '50%', top: '10%', msg: "123"},
 { left: '80%', top: '10%', msg: "456"}],
 true
)

切換標(biāo)注顯示狀態(tài)

方法名稱：toggle

參數(shù)：無(wú)

$("#div_picsign").picsign("toggle")

組件銷(xiāo)毀

方法名稱：destroy

參數(shù)：無(wú)

$("#div_picsign").picsign("destroy")

總結(jié)

以上所述是小編給大家介紹的jquery.picsign圖片標(biāo)注組件實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論