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获取table下某一行某一列的值实现代码
Apr 07 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery冲突问题解决方法
Jan 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
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php中fsockopen用法实例
2015/01/05 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python Celery定时任务的示例
2018/03/13 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
如何真正的了解python装饰器
2020/08/14 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
物业管理专业个人的自我评价
2013/11/19 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
书法培训心得体会
2014/01/05 职场文书
争论的故事教学反思
2014/02/06 职场文书
高中生评语大全
2014/04/25 职场文书
奥运会口号
2014/06/13 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书