Home > Article > Web Front-end > Detailed explanation of the use of jquery.picsign component
This time I will bring you a detailed explanation of the use of the jquery.picsign component. What are the precautions when using the jquery.picsign component. The following is a practical case, let’s take a look.
After several days of trying and learning, I have encapsulated my first js component. If there are many shortcomings, please let me know.
Because of some business needs, I need to add some annotations to the pictures. I found some on the Internet, but they can't meet the needs, and there are some bugs and too many pitfalls
So I had the idea to encapsulate one myself, learned the implementation ideas of other similar components, and the development ideas of js components, and developed the jquery.picsign component
jQuery picture annotation component (jquery.picsign)
Online demonstration: http://artlessbruin.gitee.io/picsign/
gitee: https://gitee.com/ArtlessBruin/PicSign
1. Component dependencies
jquery
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<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. ReferenceComponent file
<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" /> <script src="js/jquery.picsign.js"></script>
3. Use
Add a p
<p id="picsign"></p>
to the page Initialization component
$("#picsign").picsign(option); //option为组件参数,详细说明见option参数说明
option parameter description
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) {//删除完成执行的方法 } };
Basic data format
[{ left:'50%', top:'50%', msg:'这是标注信息', signid:'这是标注唯一标识符,用户无需赋值,与组件逻辑相关,请不要使用此关键字' }]
The data added by the user must contain left, top, msg attributes
Users can extend other attributes by themselves
Special instructions: Please do not add and use the signid keyword
Method call
$("#picsign").picsign('functionName',parameter); //functionName为方法名称,parameter为方法参数,详细说明参见方法说明
Method description
Get annotation data
Method name: getData
Parameters: None
$("#picsign").picsign('getData');
Add annotation data
Method name: addSign
Parameters: Basic data Json, whether to trigger event (default is true)
$("#p_picsign").picsign("addSign", [{ left: '50%', top: '10%', msg: "123"}, { left: '80%', top: '10%', msg: "456"}], true )
Switch label display status
Method name: toggle
Parameters: None
$("#p_picsign").picsign("toggle")
Component destruction
Method name: destroy
Parameters: None
$("#p_picsign").picsign("destroy")
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of JS array deduplication with graphics and text
Yuansheng js implements lottery function
JS implements unlimited loading and paging function on the mobile terminal
The above is the detailed content of Detailed explanation of the use of jquery.picsign component. For more information, please follow other related articles on the PHP Chinese website!