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实现百度登录框的动态切换效果
Apr 21 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
php旋转图片90度的方法
2013/11/07 PHP
jquery text()要注意啦
2009/10/30 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python爬取国外天气预报网站的方法
2015/07/10 Python
使用python3实现操作串口详解
2019/01/01 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
pandas数据集的端到端处理
2019/02/18 Python
Python笔记之观察者模式
2019/11/20 Python
python 如何实现遗传算法
2020/09/22 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
UNIX文件类型
2013/08/29 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
国税会议欢迎词
2014/01/16 职场文书
打架检讨书400字
2014/01/17 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
主办会计岗位职责
2014/03/13 职场文书
新年团拜会主持词
2014/04/02 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
2015年话务员工作总结
2015/04/29 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS