jquery.picsign圖片標注組件的示例分析

這篇文章主要為大家展示了“jquery.picsign圖片標注組件的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jquery.picsign圖片標注組件的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)主營伊春網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件定制開發(fā),伊春h5小程序開發(fā)搭建,伊春網(wǎng)站營銷推廣歡迎伊春等地區(qū)企業(yè)咨詢

因為一些業(yè)務需求，需要給圖片添加一些標注，從網(wǎng)上找了一些但都不能滿足需求，并且存在一些bug，坑太多

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

jQuery圖片標注組件（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 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

layer

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

webui-popover

<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.css" 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. 使用

在頁面中加入一個DIV

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

初始化組件

$("#picsign").picsign(option);
//option為組件參數(shù)，詳細說明見option參數(shù)說明

option參數(shù)說明

var option={
 picurl: null,//圖片地址
 signdata: [],//初始數(shù)據(jù),詳細說明參見基本數(shù)據(jù)格式
 editable: {//是否可編輯(默認可編輯 設置為false則禁用所有編輯)
 add: true,//是否可添加
 update: true,//是否可修改
 del: true,//是否可刪除
 move: true//是否可移動
 },
 signclass: 'signdot',//標注點樣式
 popwidth: 400,//標注內(nèi)容顯示窗口寬
 popheight: 247,//標注內(nèi)容顯示窗口高
 inputwidth: 400,//標注內(nèi)容編輯窗口寬
 inputheight: 247,//標注內(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:'這是標注信息',
 signid:'這是標注唯一標識符，用戶無需賦值，與組件邏輯相關(guān)，請不要使用此關(guān)鍵字'
}]

• 用戶添加的數(shù)據(jù)中必須包含left、top、msg屬性

• 用戶可自行擴展其他屬性

• 特殊說明：請不要添加和使用signid關(guān)鍵字

方法調(diào)用

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

方法說明

獲取標注數(shù)據(jù)

方法名稱：getData

參數(shù)：無

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

添加標注數(shù)據(jù)

方法名稱：addSign

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

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

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

方法名稱：toggle

參數(shù)：無

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

組件銷毀

方法名稱：destroy

參數(shù)：無

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

以上是“jquery.picsign圖片標注組件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前名稱：jquery.picsign圖片標注組件的示例分析
路徑分享：http://bm7419.com/article42/goedhc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、品牌網(wǎng)站建設、定制網(wǎng)站、做網(wǎng)站、虛擬主機、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)