这篇文章主要介绍了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
登录后复制
初始化组件
$("#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:'这是标注唯一标识符，用户无需赋值，与组件逻辑相关，请不要使用此关键字'}]
登录后复制
用户添加的数据中必须包含left、top、msg属性
用户可自行扩展其他属性
特殊说明：请不要添加和使用signid关键字
方法调用
$("#picsign").picsign('functionName',parameter);//functionName为方法名称，parameter为方法参数，详细说明参见方法说明
登录后复制
方法说明
获取标注数据
方法名称：getData
参数：无
$("#picsign").picsign('getData');
登录后复制
添加标注数据
方法名称：addSign
参数：基本数据Json,是否触发事件（默认为true）
$("#p_picsign").picsign("addSign", [{ left: '50%', top: '10%', msg: "123"}, { left: '80%', top: '10%', msg: "456"}], true)
登录后复制
切换标注显示状态
方法名称：toggle
参数：无
$("#p_picsign").picsign("toggle")
登录后复制
组件销毁
方法名称：destroy
参数：无
$("#p_picsign").picsign("destroy")
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在JS中命令模式概念与用法（详细教程）
在JS中命令模式概念与用法（详细教程）
在JS中命令模式概念与用法（详细教程）
以上就是jquery.picsign中如何使用图片标注组件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3186867.html
