Guide d'utilisation du plug-in d'édition de balises jQuery Tagit_jquery

1. Fonction plug-in Tagit

Améliorez l'interactivité du site Web et augmentez l'expérience utilisateur. Quant aux autres fonctions, il n’y en a vraiment pas. Remplacez-le simplement par un texte de saisie. Mais le texte n'a pas de fonction d'invite de saisie, alors que tagit a cette fonction. L'exemple officiel est le suivant :

Étiquez les mots-clés dans un tout. Facile à supprimer et à parcourir.

2. Adresse officielle de Tagit

http://aehlke.github.io/tag-it/
L'adresse officielle contient des instructions d'utilisation et des exemples. La correspondance des couleurs des cas d'utilisation peut également être sélectionnée. Mais il n'y a que ces types parmi lesquels choisir. Le plug-in Tagit utilise jqueryui, donc les styles fournis par jqueryui sont également compatibles. jqueryui est également un plug-in pour jquery, fournissant des éléments d'interface très fonctionnels. jqueryui nous propose également certains styles parmi lesquels choisir, mais seuls ceux-ci sont parmi lesquels choisir. Je voulais apporter quelques modifications, mais j'ai trouvé qu'il était difficile de modifier les styles de certains éléments. Si je changeais un endroit, je changerais par inadvertance d'autres endroits. Certains endroits proposent également des styles gratuits de plug-ins jqueryui, et bien sûr, il existe également des plug-ins payants. Ce que nous appelons l'extension jqueryui du plug-in tagit.

Il est plus simple de modifier le style du tagit. Dans le test, je vais simplement modifier le style du tagit, juste pour montrer comment le modifier. Il existe de nombreuses façons de modifier les styles, et celle-ci n’est que l’une d’entre elles.

Tagit prend en charge les opérations événementielles, telles que les événements qui peuvent être déclenchés avant la modification, après la modification, avant la suppression et après la suppression.

3. Comment utiliser Tagit

Tagit est très simple à utiliser, mais il référence de nombreux fichiers. Parce que Tagit est une extension de jqueryui, lorsque nous faisons référence à jquery, nous devons également référencer les styles jqueryui et jqueryui. Puis s'ajoute.
1. Fichiers de référence

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="tag-it.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">

2. Style personnalisé

#container{
width:400px;
}
input[type=submit]{
padding:8px;
}
/*定义边框*/
#singleFieldTags{
border:1px solid #b1c9dc;
background:#e7e3ca;
}
/*定义输入元素text*/
#singleFieldTags input{
background:#e7e3ca;
color:blue;
}
/*定义标签样式*/
#singleFieldTags li{
background:#e7e3ca;
border:1px solid #930;
color:red;
}
/*第一输入元素的父元素*/
#singleFieldTags .tagit-new{
border:none;
}

Code 3.js

$(function(){
var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
$('#myTags').tagit({
singleField: true, 
singleFieldNode: $('#myTagsValues')
});
$('#singleFieldTags').tagit({
//输入提示
availableTags: sampleTags,
// 与赋值操作有关
singleField: true,
allowSpaces: true, //标签中是否允许空格
singleFieldNode: $('#mySingleField') //将值保存到mySingleField元素
});
$('#submit1').click(function(){
alert($('#myTagsValues').val());
});
$('#submit2').click(function(){
alert($('#mySingleField').val());
});
});

4. HTML utilisé

<div id="container">
<p><b>测试用例1</b></p>
<ul id="myTags">
</ul>
<input type="hidden" id="myTagsValues" />
<input type="submit" value="获取输入信息" id="submit1"/>
<P><b>测试用例2</b></P>
<p><b>绑定默认关键词，在添加关键词时允许空格</b></p>
<p>修改后的样式</p>
<ul id="singleFieldTags">
</ul>
<input name="tags" id="mySingleField" value="CSharp, jQuery" disabled="true">
<br />
<input type="submit" value="获取输入信息" id="submit2" />
</div>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.