首页 > web前端 > js教程 > jquery.picsign中如何使用图片标注组件

jquery.picsign中如何使用图片标注组件

亚连
发布: 2018-06-08 13:51:47
原创
1945 人浏览过

这篇文章主要介绍了jquery.picsign 自己封装的第一个开源组件,需要的朋友可以参考下

经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教。

因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多

因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了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 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="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="stylesheet">
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
登录后复制

webui-popover

<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.css" 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. 使用

在页面中加入一个p

<p id="picsign"></p>
登录后复制

初始化组件

$("#picsign").picsign(option);
//option为组件参数,详细说明见option参数说明
登录后复制

option参数说明

var option={
 picurl: null,//图片地址
 signdata: [],//初始数据,详细说明参见基本数据格式
 editable: {//是否可编辑(默认可编辑 设置为false则禁用所有编辑)
 add: true,//是否可添加
 update: true,//是否可修改
 del: true,//是否可删除
 move: true//是否可移动
 },
 signclass: &#39;signdot&#39;,//标注点样式
 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:&#39;50%&#39;,
 top:&#39;50%&#39;,
 msg:&#39;这是标注信息&#39;,
 signid:&#39;这是标注唯一标识符,用户无需赋值,与组件逻辑相关,请不要使用此关键字&#39;
}]
登录后复制
  • 用户添加的数据中必须包含left、top、msg属性

  • 用户可自行扩展其他属性

  • 特殊说明:请不要添加和使用signid关键字

方法调用

$("#picsign").picsign(&#39;functionName&#39;,parameter);
//functionName为方法名称,parameter为方法参数,详细说明参见方法说明
登录后复制

方法说明

获取标注数据

方法名称:getData

参数:无

$("#picsign").picsign(&#39;getData&#39;);
登录后复制

添加标注数据

方法名称:addSign

参数:基本数据Json,是否触发事件(默认为true)

$("#p_picsign").picsign("addSign",
 [{ left: &#39;50%&#39;, top: &#39;10%&#39;, msg: "123"},
 { left: &#39;80%&#39;, top: &#39;10%&#39;, msg: "456"}],
 true
)
登录后复制

切换标注显示状态

方法名称:toggle

参数:无

$("#p_picsign").picsign("toggle")
登录后复制

组件销毁

方法名称:destroy

参数:无

$("#p_picsign").picsign("destroy")
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在JS中命令模式概念与用法(详细教程)

使用selenium抓取淘宝数据信息

使用百度地图如何实现地图网格

以上是jquery.picsign中如何使用图片标注组件的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板