jQuery tag editing plug-in Tagit usage guide_jquery

1. Tagit plug-in function

Improve website interactivity and increase user experience. As for other functions, there really aren’t any. Just replace it with an input text. But text does not have an input prompt function, while tagit has this function. The official example is as follows:

Tag keywords into a whole. Easy to delete and browse.

2. Tagit official address

http://aehlke.github.io/tag-it/
The official address has instructions for use and examples. The color matching of the use cases can also be selected. But there are just these types to choose from. The Tagit plug-in uses jqueryui, so the styles provided by jqueryui are also compatible. jqueryui is also a plug-in for jquery, providing very functional interface elements. jqueryui also provides some styles for us to choose from, but only those are the ones to choose from. I wanted to make some modifications, but found that it was difficult to modify the styles of some elements. If I changed one place, I would inadvertently change other places. Some places also provide free styles of jqueryui plug-ins, and of course there are also paid ones. What we call tagit plug-in jqueryui extension.

It is simpler to modify the tagit style. In the test, I will simply modify the tagit style, just to demonstrate how to modify it. There are many ways to modify styles, and this is just one of them.

Tagit supports event operations, such as events that can be triggered before editing, after editing, before deletion, and after deletion.

3. How to use Tagit

Tagit is very simple to use, but it references many files. Because Tagit is an extension of jqueryui, when we reference jquery, we must also reference jqueryui and jqueryui styles. Then add itself.
1. Reference files

<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. Custom style

#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. HTML used

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

The above is the entire content of this article, I hope you all like it.