这次给大家带来jquery.picsign组件使用详解，jquery.picsign组件使用的
注意事项
有哪些，下面就是实战案例，一起来看一下。
经过几天的尝试和学习，封装了自己的第一个js组件,有很多不足之处还请赐教。
因为一些业务需求，需要给图片添加一些标注，从网上找了一些但都不能满足需求，并且存在一些bug，坑太多
因此就有想法自己封装一个，学习了其他类似组件的实现思路，以及js组件的开发思路，开发了jquery.picsign组件
jQuery图片标注组件（jquery.picsign）
在线演示：http://artlessbruin.gitee.io/picsign/
gitee：
https://
gitee.com/ArtlessBruin/PicSign
1. 组件依赖
jquery
bootstrap
layer
webui-popover
2.引用组件文件
3. 使用
在页面中加入一个p
初始化组件
option参数说明
基本数据格式
用户添加的数据中必须包含left、top、msg
属性
用户可自行扩展其他属性
特殊说明：请不要添加和使用signid关键字
方法调用
方法说明
获取标注数据
方法名称：getData
参数：无
添加标注数据
方法名称：addSign
参数：基本数据Json,是否触发
事件
（默认为true）
切换标注显示状态
方法名称：toggle
参数：无
组件销毁
方法名称：destroy
参数：无
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
JS数组去重图文详解
源生js实现抽奖功能
JS在移动端实现无限加载分页功能
content end
$("#picsign").picsign(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为方法参数，详细说明参见方法说明$("#picsign").picsign('getData');$("#p_picsign").picsign("addSign",
[{ left: '50%', top: '10%', msg: "123"},
{ left: '80%', top: '10%', msg: "456"}],
true
)$("#p_picsign").picsign("toggle")$("#p_picsign").picsign("destroy")