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实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
基于jquery实现五星好评
Nov 18 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery实现手风琴特效
Jan 11 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中使用灵巧的体系结构
2006/10/09 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
Java中final关键字详解
2015/08/10 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
司法所长先进事迹
2014/06/02 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
python实现剪贴板的操作
2021/07/01 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python
java项目构建Gradle的使用教程
2022/03/24 Java/Android