Detaillierte Erläuterung der Verwendung der jquery.picsign-Komponente

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung der jquery.picsign-Komponente geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der jquery.picsign-Komponente? Werfen wir einen Blick darauf.

Nach mehreren Tagen des Ausprobierens und Lernens habe ich meine erste js-Komponente gekapselt. Wenn es viele Mängel gibt, lassen Sie es mich bitte wissen.

Aufgrund einiger geschäftlicher Anforderungen muss ich einige Anmerkungen zu den Bildern hinzufügen. Ich habe einige im Internet gefunden, aber sie können die Anforderungen nicht erfüllen, und es gibt einige Fehler und zu viele Fallstricke

Also hatte ich die Idee, selbst eine zu kapseln, lernte die Implementierungsideen anderer ähnlicher Komponenten und die Entwicklungsideen von js-Komponenten kennen und entwickelte die jquery.picsign-Komponente

jQuery-Bildanmerkungskomponente (jquery.picsign)

Online-Demo: http://artlessbruin.gitee.io/picsign/

gitee:https://gitee.com/ArtlessBruin/PicSign

1. Komponentenabhängigkeiten

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>

Schicht

<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. ZitatKomponentendatei

<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery.picsign.js"></script>

3. Verwenden Sie

Fügen Sie der Seite ein p

<p id="picsign"></p>

hinzu Initialisierungskomponente

$("#picsign").picsign(option);
//option为组件参数，详细说明见option参数说明

Optionsparameterbeschreibung

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) {//删除完成执行的方法
 }
};

Grundlegendes Datenformat

[{
 left:'50%',
 top:'50%',
 msg:'这是标注信息',
 signid:'这是标注唯一标识符，用户无需赋值，与组件逻辑相关，请不要使用此关键字'
}]

• Die vom Benutzer hinzugefügten Daten müssen die Attribute left, top, msg

• enthalten Benutzer können andere Attribute selbst erweitern

• Besondere Anweisungen: Bitte fügen Sie nicht das Schlüsselwort signid

hinzu und verwenden Sie es nicht

Methodenaufruf

$("#picsign").picsign('functionName',parameter);
//functionName为方法名称，parameter为方法参数，详细说明参见方法说明

Methodenbeschreibung

Anmerkungsdaten abrufen

Methodenname: getData

Parameter: Keine

$("#picsign").picsign('getData');

Anmerkungsdaten hinzufügen

Methodenname: addSign

Parameter: Grunddaten JSON, ob das

Ereignis ausgelöst werden soll (Standard ist wahr)

$("#p_picsign").picsign("addSign",
 [{ left: '50%', top: '10%', msg: "123"},
 { left: '80%', top: '10%', msg: "456"}],
 true
)

Status der Etikettenanzeige ändern

Methodenname: umschalten

Parameter: Keine

$("#p_picsign").picsign("toggle")

Bauteilzerstörung

Methodenname: destroy

Parameter: Keine

$("#p_picsign").picsign("destroy")

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Grafik und des Textes zur JS-Array-Deduplizierung

Yuansheng js implementiert die Lotteriefunktion

JS realisiert unbegrenzte Lade- und Paging-Funktionen auf mobilen Endgeräten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der jquery.picsign-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!