Explication détaillée de l'utilisation du composant jquery.picsign

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du composant jquery.picsign. Quelles sont les précautions lors de l'utilisation du composant jquery.picsign. jetons un coup d'oeil.

Après plusieurs jours d'essais et d'apprentissage, j'ai encapsulé mon premier composant js. S'il y a de nombreuses lacunes, n'hésitez pas à me le faire savoir.

En raison de certains besoins professionnels, je dois ajouter quelques annotations aux images. J'en ai trouvé sur Internet, mais elles ne peuvent pas répondre aux besoins, et il y a quelques bugs et trop d'embûches

. J'ai donc eu l'idée d'en encapsuler un moi-même, j'ai appris les idées d'implémentation d'autres composants similaires et les idées de développement de composants js, et j'ai développé le composant jquery.picsign

Composant d'annotation d'image jQuery (jquery.picsign)

Démo en ligne : http://artlessbruin.gitee.io/picsign/

gîte :https://gitee.com/ArtlessBruin/PicSign

1. Dépendances des composants

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>

couche

<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. CitationFichier composant

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

3. Utiliser

Ajouter un p

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

à la page Composant d'initialisation

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

Description du paramètre d'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) {//删除完成执行的方法
 }
};

Format de données de base

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

• Les données ajoutées par l'utilisateur doivent contenir des attributs left, top, msg

• Les utilisateurs peuvent étendre eux-mêmes d'autres attributs

• Instructions spéciales : Veuillez ne pas ajouter et utiliser le mot-clé signid

Appel de méthode

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

Description de la méthode

Obtenir des données d'annotation

Nom de la méthode : getData

Paramètres : Aucun

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

Ajouter des données d'annotation

Nom de la méthode : addSign

Paramètres : Données de base Json, s'il faut déclencher

événement (la valeur par défaut est vraie)

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

Changer l'état d'affichage de l'étiquette

Nom de la méthode : bascule

Paramètres : Aucun

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

Destruction de composants

Nom de la méthode : détruire

Paramètres : Aucun

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du graphique et du texte de déduplication de tableau JS

Yuansheng js implémente la fonction de loterie

JS réalise une fonction de chargement et de pagination illimitée sur le terminal mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!