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插件之validation插件
Mar 29 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
React组件的三种写法总结
2017/01/12 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
python3的输入方式及多组输入方法
2018/10/17 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
一文读懂Python 枚举
2020/08/25 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
十佳教师事迹材料
2014/01/11 职场文书
致400米运动员广播稿
2014/02/07 职场文书
产品质量保证书
2014/04/29 职场文书
图书室标语
2014/06/21 职场文书
爱心募捐通知范文
2015/04/27 职场文书
护理自荐信
2019/05/14 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL