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

 更新时间:2018年02月02日 08:53:52   作者:ArtlessBruin  
这篇文章主要介绍了jquery.picsign 自己封装的第一个开源组件,需要的朋友可以参考下

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

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

因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了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带搜索框的下拉菜单

    Jquery带搜索框的下拉菜单,需要的朋友可以参考一下
    2013-05-05
  • jQuery实现摸拟alert提示框

    jQuery实现摸拟alert提示框

    这篇文章主要介绍了jQuery实现摸拟alert提示框的相关资料,需要的朋友可以参考下
    2016-05-05
  • jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例

    jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例

    这篇文章主要介绍了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法,以完整实例形式较为详细的分析了jQuery图片特效的使用技巧,需要的朋友可以参考下
    2015-03-03
  • JQuery1.6 使用方法三

    JQuery1.6 使用方法三

    JQuery1.6 使用方法三,想要学习jquery的朋友可以参考下。
    2011-11-11
  • 通过jQuery源码学习javascript(二)

    通过jQuery源码学习javascript(二)

    昨天写了篇通过jQuery源码学习javascript(一),里面有一个定义对象C的方法,我早期也没有太注意这个方面的技术细节。后来我查了一下资料,发现里面有很多巧的地方。今天与大家分享
    2012-12-12
  • jQuery仿移动端支付宝键盘的实现代码

    jQuery仿移动端支付宝键盘的实现代码

    最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种。项目只是单纯的手机网站,所以这个功能由前端来实现,下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码,需要的朋友参考下吧
    2018-08-08
  • jQuery function的正确书写方法

    jQuery function的正确书写方法

    jQuery function想必大家都不会陌生,web前端开发人员经常会接触到,下面为大家介绍下它的正确书写方法,感兴趣的朋友可以参考下
    2013-08-08
  • jquery星级插件、支持页面中多次使用

    jquery星级插件、支持页面中多次使用

    一个关于jquery星级插件的博文,那是我从网上收集的,它只支持一个页面中使用一次,多次使用的话会发生冲突,达不到我项目的需求,没办法,只能修改它
    2012-03-03
  • jQuery的三种$()

    jQuery的三种$()

    $号是jQuery“类”的一个别称,$()构造了一个jQuery对象。所以,“$()”可以叫做jQuery的构造函数(个人观点,呵呵!)。
    2009-12-12
  • jQuery实现下拉框功能实例代码

    jQuery实现下拉框功能实例代码

    这篇文章主要介绍了jQuery实现下拉框功能实例代码的相关资料,需要的朋友可以参考下
    2016-05-05

最新评论