jquery.picsign图片标注组件示例详解

经过几天的尝试和学习，我封装了我的第一个js组件，但是有很多缺点，请给我一些建议。

因为一些业务需要，需要给图片添加一些注释。有些是在网上找到的，但是不能满足需要，还有一些bug和太多的坑

所以我有想法自己打包一个，学习其他类似组件的实现思路和js组件的开发思路，开发jquery.picsign组件

jQuery图片注释组件(jquery.picsign)

在线演示：http://artlessbruin.gitee.io/picsign/

吉蒂：https://gitee.com/ArtlessBruin/PicSign

1.组件依赖性

框架

script src=' http :https://cdn . bootscs.com/jquery/3 . 3 . 1/jquery . min . js '/script bootstrap

link href=' https://cdn . bootcss.com/bootstrap/3 . 3 . 7/CSS/bootstrap . min . CSS ' rel='样式表' script src=' http :https://cdn . bootcss.com/bootstrap/3 . 3 . 7/js/bootstrap . min . js '/script layer

link href=' https://cdn . bootcss.com/layer/3 . 1 . 0/theme/default/layer . CSS ' rel='样式表' script src=' http :3359 cdn . bootcss.com/layer/3 . 1 . 0/layer . js '/script webui-popover

link href=' https://cdn . bootscs.com/Webui-Popo ver/2 . 1 . 15/jquery . Webui-Popo ver . min . CSS ' rel='样式表' script src=' http :https://cdn . bootscs.com/Webui-Popo ver/2 . 1 . 15/jquery . Webui-Popo ver . min . js '/script 2。参考组件文件

链接href=' CSS/jquery . picsign . CSS ' rel=' external no follow ' rel='样式表'/script src=' http : js/jquery . picsign . js '/script 3 . use

向页面添加一个DIV

Div id='picsign'/div初始化组件

$('#picsign ')。picsign(选项)；//option是一个组件参数。有关详细信息，请参见选项参数描述选项参数描述

Var option={ picurl: null，//图片地址signdata: []，//初始数据，详见基础数据格式editable : {///是否可编辑(如果默认可编辑设置为false，则禁用所有编辑)add: true，//是否可以添加update:true，//是否可以修改del:true，//是否可以删除move:true是否可以移动}，signclass: //在添加：函数(数据)前将内容编辑窗口标记为高{//添加保存前执行的方法，返回false阻止添加}、onadd:函数(数据){//添加执行的方法}、在更新：函数(数据)前{//修改保存前执行的方法，返回false阻止修改}、在更新：函数(数据){//修改执行的方法}、在删除保存前执行的方法之前{//删除保存前执行的方法，返回false阻止删除基本数据格式

[{left:' 50% '，top:' 50% '，msg: '这是批注信息'，signid: '这是批注的唯一标识符，因此用户不需要赋值，这与组件逻辑有关，所以请不要使用此关键字' }]用户添加的数据必须包含left、top和msg的属性。用户可以自行扩展其他属性。

$('#picsign ')。picsign('functionName '，参数)；//functionName是方法名，参数是方法参数。详情请参考方法描述方法描述

获取注释数据

方法名：getData

参数：无

$('#picsign ')。picsign(' GetDATa ')；添加标签数据

方法名：添加符号

参数：基础数据Json，是否触发事件(默认为真)

$ ('# div _ picsign ')。picsign ('add sign '，[{left:' 50% '，top:' 10% '，msg:' 123'}，{left:' 80% '，top:' 10

方法名称：切换

参数：无

$ ('# div _ picsign ')。picsign ('toggle ')组件破坏

方法名：销毁

参数：无

$ ('# div _ picsign ')。picsign('销毁')摘要

以上是边肖介绍的jquery.picsign图片标注组件示例的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！