經過幾天的嘗試和學習，封裝了自己的第一個js組件,有很多不足之處還請賜教。
因為一些業務需求，需要給圖片添加一些標注，從網上找了一些但都不能滿足需求，并且存在一些bug，坑太多
因此就有想法自己封裝一個，學習了其他類似組件的實現思路，以及js組件的開發思路，開發了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 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. 使用
在頁面中加入一個DIV
<div id="picsign"></div>
初始化組件
$("#picsign").picsign(option);//option為組件參數，詳細說明見option參數說明option參數說明
var option={ picurl: null,//圖片地址 signdata: [],//初始數據,詳細說明參見基本數據格式 editable: {//是否可編輯(默認可編輯 設置為false則禁用所有編輯) add: true,//是否可添加 update: true,//是否可修改 del: true,//是否可刪除 move: true//是否可移動 }, signclass: 'signdot',//標注點樣式 popwidth: 400,//標注內容顯示窗口寬 popheight: 247,//標注內容顯示窗口高 inputwidth: 400,//標注內容編輯窗口寬 inputheight: 247,//標注內容編輯窗口高 beforeadd: function (data) {//在添加保存前執行的方法，返回false阻斷添加 }, onadd: function (data) {//添加完成執行的方法 }, beforeupdate: function (data) {//在修改保存前執行的方法，返回false阻斷修改 }, onupdate: function (data) {//修改完成執行的方法 }, beforedel: function (data) {//在刪除保存前執行的方法，返回false阻斷刪除 }, ondel: function (data) {//刪除完成執行的方法 }};基本數據格式
[{ left:'50%', top:'50%', msg:'這是標注信息', signid:'這是標注唯一標識符，用戶無需賦值，與組件邏輯相關，請不要使用此關鍵字'}]方法調用
$("#picsign").picsign('functionName',parameter);//functionName為方法名稱，parameter為方法參數，詳細說明參見方法說明方法說明
獲取標注數據
方法名稱：getData
參數：無
$("#picsign").picsign('getData');添加標注數據
方法名稱：addSign
參數：基本數據Json,是否觸發事件（默認為true）
$("#div_picsign").picsign("addSign", [{ left: '50%', top: '10%', msg: "123"}, { left: '80%', top: '10%', msg: "456"}], true)切換標注顯示狀態
方法名稱：toggle
參數：無
$("#div_picsign").picsign("toggle")組件銷毀
方法名稱：destroy
參數：無
$("#div_picsign").picsign("destroy")總結
以上所述是小編給大家介紹的jquery.picsign圖片標注組件實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
