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


Posted in jQuery onFebruary 02, 2018

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

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

因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件

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. 使用

在页面中加入一个DIV

<div id="picsign"></div>

初始化组件

$("#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)

$("#div_picsign").picsign("addSign",
 [{ left: '50%', top: '10%', msg: "123"},
 { left: '80%', top: '10%', msg: "456"}],
 true
)

切换标注显示状态

方法名称:toggle

参数:无

$("#div_picsign").picsign("toggle")

组件销毁

方法名称:destroy

参数:无

$("#div_picsign").picsign("destroy")

总结

以上所述是小编给大家介绍的jquery.picsign图片标注组件实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
jQuery代码优化方法总结
Jan 29 #jQuery
jquery写出PC端轮播图实例
Jan 26 #jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
You might like
Protoss兵种介绍
2020/03/14 星际争霸
php 保留小数点
2009/04/21 PHP
php 全局变量范围分析
2009/08/07 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php判断是否为json格式的方法
2014/03/04 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
简单实现python画圆功能
2018/01/25 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python的链表基础知识点
2020/09/13 Python
Python实现区域填充的示例代码
2021/02/03 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
《兰亭集序》教学反思
2014/02/11 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
小学生表扬稿范文
2015/05/05 职场文书
数学备课组工作总结
2015/08/12 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书