经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教。
因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多
因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件
jQuery图片标注组件(jquery.picsign)
在线演示:http://artlessbruin.gitee.io/picsign/
gitee:https://gitee.com/ArtlessBruin/PicSign
1. 组件依赖
jquery
<script src="/UploadFiles/2021-04-02/jquery.min.js">bootstrap
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/bootstrap.min.js">layer
<link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/layer.js">webui-popover
<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.css" rel="stylesheet"> <script src="/UploadFiles/2021-04-02/jquery.webui-popover.min.js">2. 引用组件文件
<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" /> <script src="/UploadFiles/2021-04-02/jquery.picsign.js">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图片标注组件实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!华山资源网 Design By www.eoogi.com暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 王子异《1996 Part.2》[320K/MP3][18.29MB]
- 群星.1994-宝丽金最倾情3CD【宝丽金】【WAV+CUE】
- 乐俊亨.2024-同泪【CharioticMusic】【FLAC分轨】
- 何耀珊.2006-收获【华纳】【WAV+CUE】
- 梁汉文1994-壹精选[华星][WAV+CUE]
- 洪荣宏1981-歹路不可行·相思雨(飞跃复刻版)[光美][WAV+CUE]
- 旅行团2015-10Day’s[来福胶泥][WAV+CUE]
- 龙千玉.2011-卡将哟【豪记】【WAV+CUE】
- 蔣志光.1993-多情多寂寞(国专)【BMG】【WAV+CUE】
- 陈慧娴.1996-雪映美白96演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 王子异《1996 Part.2》[FLAC/分轨][50.66MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[320K/MP3][155.91MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[FLAC/分轨][251.78MB]
- 黄韵玲2001-巴结音乐[全员集合][WAV+CUE]
- 郑绪岚2015-流金岁月·精选[首版][WAV+CUE]