jquery.picsign圖片標(biāo)注組件實(shí)例詳解
經(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")
組件銷毀
方法名稱：destroy
參數(shù)：無(wú)
$("#div_picsign").picsign("destroy")
總結(jié)
以上所述是小編給大家介紹的jquery.picsign圖片標(biāo)注組件實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- python實(shí)現(xiàn)簡(jiǎn)單圖片物體標(biāo)注工具
- vue如何使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)
- 一款基于jQuery的圖片場(chǎng)景標(biāo)注提示彈窗特效
- 一款簡(jiǎn)單的jQuery圖片標(biāo)注效果附源碼下載
- Python tkinter實(shí)現(xiàn)圖片標(biāo)注功能(完整代碼)
- vue下如何利用canvas實(shí)現(xiàn)在線圖片標(biāo)注
- 在React中用canvas對(duì)圖片標(biāo)注的實(shí)現(xiàn)
- 微信小程序給圖片做動(dòng)態(tài)標(biāo)注的實(shí)例分享
相關(guān)文章
新聞上下滾動(dòng)jquery 超簡(jiǎn)潔(必看篇)
下面小編就為大家?guī)?lái)一篇新聞上下滾動(dòng)jquery 超簡(jiǎn)潔(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
jquery uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery uploadify隱藏上傳進(jìn)度的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
編寫zQuery庫(kù)初始起因一則是由于舊版的jQuery執(zhí)行效率（現(xiàn)在的版本好像還可以），二則是對(duì)javascript語(yǔ)言的喜愛(ài)，每每總是親歷親為，最后由于在項(xiàng)目中的需求，加入了對(duì)事件偵聽(tīng)機(jī)制的和DOM節(jié)點(diǎn)操作方法的擴(kuò)展。2008-06-06
基于jquery的Repeater實(shí)現(xiàn)代碼
本文和大家詳解如何使用javascript來(lái)實(shí)現(xiàn)一個(gè)asp.net 的Repeater控件，叫jQuery.Repeater插件。一起來(lái)看下吧。2010-07-07
jquery實(shí)現(xiàn)搜索框功能實(shí)例詳解
這篇文章主要介紹了jquery實(shí)現(xiàn)搜索框功能,搜索框?qū)崿F(xiàn)搜索一個(gè)ul列表中的指定關(guān)鍵詞的li。具體實(shí)現(xiàn)代碼大家參考下本文2018-07-07
jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
這篇文章主要為大家詳細(xì)介紹了jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作，感興趣的小伙伴們可以參考一下2015-12-12
jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索
這篇文章主要為大家詳細(xì)介紹了jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
本篇文章只要是對(duì)JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
今天總結(jié)一下學(xué)習(xí)jQuery時(shí)中遇到的一些常用的jQuery代碼，這些代碼片段可能在我們急需的時(shí)候能起到幫助。2011-07-07
cnblogs TagCloud基于jquery的實(shí)現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...2010-06-06