jquery.picsign圖片標注組件實例詳解
經(jīng)過幾天的嘗試和學習，封裝了自己的第一個js組件,有很多不足之處還請賜教。
因為一些業(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 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為組件參數(shù)，詳細說明見option參數(shù)說明
option參數(shù)說明
var option={
picurl: null,//圖片地址
signdata: [],//初始數(shù)據(jù),詳細說明參見基本數(shù)據(jù)格式
editable: {//是否可編輯(默認可編輯 設(shè)置為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")
總結(jié)
以上所述是小編給大家介紹的jquery.picsign圖片標注組件實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家?guī)硪黄侣勆舷聺L動jquery 超簡潔(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
jquery uploadify隱藏上傳進度的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query uploadify隱藏上傳進度的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
編寫zQuery庫初始起因一則是由于舊版的jQuery執(zhí)行效率（現(xiàn)在的版本好像還可以），二則是對javascript語言的喜愛，每每總是親歷親為，最后由于在項目中的需求，加入了對事件偵聽機制的和DOM節(jié)點操作方法的擴展。2008-06-06
本文和大家詳解如何使用javascript來實現(xiàn)一個asp.net 的Repeater控件，叫jQuery.Repeater插件。一起來看下吧。2010-07-07
這篇文章主要介紹了jquery實現(xiàn)搜索框功能,搜索框?qū)崿F(xiàn)搜索一個ul列表中的指定關(guān)鍵詞的li。具體實現(xiàn)代碼大家參考下本文2018-07-07
jquery插件ajaxupload實現(xiàn)文件上傳操作
這篇文章主要為大家詳細介紹了jquery插件ajaxupload實現(xiàn)文件上傳操作，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細介紹了jQuery-App輸入框?qū)崿F(xiàn)實時搜索，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JQuery的Ajax請求實現(xiàn)局部刷新的簡單實例
本篇文章只要是對JQuery的Ajax請求實現(xiàn)局部刷新的簡單實例進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
今天總結(jié)一下學習jQuery時中遇到的一些常用的jQuery代碼，這些代碼片段可能在我們急需的時候能起到幫助。2011-07-07
cnblogs TagCloud基于jquery的實現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...2010-06-06