jQuery-Tag-Bearbeitungs-Plug-in Tagit-Nutzungsanleitung_jquery

1. Tagit-Plug-in-Funktion

Verbessern Sie die Interaktivität der Website und steigern Sie das Benutzererlebnis. Was andere Funktionen betrifft, gibt es eigentlich keine. Ersetzen Sie es einfach durch einen Eingabetext. Text verfügt jedoch nicht über eine Eingabeaufforderungsfunktion, während Tagit über diese Funktion verfügt. Das offizielle Beispiel lautet wie folgt:

Taggen Sie Schlüsselwörter zu einem Ganzen. Einfach zu löschen und zu durchsuchen.

2. Offizielle Tagit-Adresse

http://aehlke.github.io/tag-it/
Die offizielle Adresse enthält Gebrauchsanweisungen und Beispiele. Auch die farbliche Abstimmung der Anwendungsfälle ist wählbar. Es stehen jedoch nur diese Typen zur Auswahl. Das Tagit-Plug-in verwendet jqueryui, sodass auch die von jqueryui bereitgestellten Stile kompatibel sind. jqueryui ist auch ein Plug-in für jquery und bietet sehr funktionale Schnittstellenelemente. jqueryui bietet uns auch einige Stile zur Auswahl, aber nur diese stehen zur Auswahl. Ich wollte einige Änderungen vornehmen, stellte jedoch fest, dass es schwierig war, den Stil einiger Elemente zu ändern. Wenn ich eine Stelle änderte, änderte ich versehentlich andere Stellen. Einige Orte bieten auch kostenlose Stile von Jqueryui-Plug-Ins an, und natürlich gibt es auch kostenpflichtige. Was wir als Tagit-Plug-in-Jqueryui-Erweiterung bezeichnen.

Es ist einfacher, den Tagit-Stil zu ändern. Im Test werde ich einfach den Tagit-Stil ändern, um zu zeigen, wie man ihn ändert. Es gibt viele Möglichkeiten, Stile zu ändern, und dies ist nur eine davon.

Tagit unterstützt Ereignisvorgänge, z. B. Ereignisse, die vor der Bearbeitung, nach der Bearbeitung, vor dem Löschen und nach dem Löschen ausgelöst werden können.

3. So verwenden Sie Tagit

Tagit ist sehr einfach zu verwenden, verweist jedoch auf viele Dateien. Da Tagit eine Erweiterung von jqueryui ist, müssen wir beim Verweisen auf jquery auch auf jqueryui und den jqueryui-Stil verweisen. Dann fügt sich selbst hinzu.
1. Referenzdateien

<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. Benutzerdefinierter Stil

#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;
}

3.js-Code

$(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. Verwendetes HTML

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.