JQuery label editing plug-in Tagit User Guide, jquerytagit

JQuery label editing plug-in Tagit User Guide, jquerytagit

I. Tagit plug-in Function

Improve website interaction and user experience. There are no other functions. You can replace it with an input text. However, text does not provide the prompt function, but tagit does. Official example:

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

Ii. Official Tagit address

Http://aehlke.github.io/tag-it/
The official address provides instructions and examples. You can also choose the use case color. However, the Tagit plug-in uses jqueryui, so the style provided by jqueryui is also compatible. Jqueryui is also a jquery plug-in that provides very functional interface elements. Jqueryui also provides some styles for us to choose. If you want to modify the style of some elements, you can find that it is difficult to modify the style of some elements. Instead, you can change the style of other elements. In some cases, jqueryui plug-ins are provided for free, and of course there are charges. The extension of the tagit plug-in jqueryui.

It is easier 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. This is only one of them.

Tagit supports event operations, such as before, after, before, and after editing.

Iii. Tagit usage

The use of Tagit is very simple, but there are many referenced files. Because Tagit is an extension of jqueryui, we also need to reference jqueryui and jqueryui styles while referencing jquery. Then add yourself.
1. reference file

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

# Container {width: 400px;} input [type = submit] {padding: 8px;}/* define the border */# singleFieldTags {border: 1px solid # b1c9dc; background: # e7e3ca;}/* define the input element text */# singleFieldTags input {background: # e7e3ca; color: blue;}/* define the label style */# singleFieldTags li {background: # e7e3ca; border: 1px solid #930; color: red;}/* parent element of the first input element */# singleFieldTags. tagit-new {border: none ;}

3. js Code

$ (Function () {var sampleTags = ['C ++ ', 'java', 'php', 'ldfusion', 'javascript ', 'asp', 'Ruby ', 'python', 'C', 'scala ', 'groovy', 'haskell ', 'perl', 'erlang ', 'ap', 'cobol', 'Go ', 'lua']; $ ('# mytags '). tagit ({singleField: true, singleFieldNode: $ ('# myTagsValues')}); $ ('# singleFieldTags '). tagit ({// input prompt availableTags: sampleTags, // related to the value assignment operation singleField: true, allowSpaces: true, // whether spaces singleFieldNode are allowed in the tag: $ ('# mySingleField') // Save the value to the mySingleField element}); $ ('# submit1 '). click (function () {alert ($ ('# myTagsValues '). val () ;}); $ ('# submit2 '). click (function () {alert ($ ('# mySingleField '). val ());});});

4. html

<Div id = "container"> <p> <B> Test Case 1 </B> </p> <ul id = "myTags"> </ul> <input type = "hidden" id = "myTagsValues"/> <input type = "submit" value = "Get input information" id = "submit1"/> <P> <B> test case 2 </B> </P> <p> <B> bind the default keyword, space allowed when adding keywords </B> </p> <p> modified style </p> <ul id = "singleFieldTags"> </ul> <input name = "tags" id = "mySingleField" value = "CSharp, jQuery "disabled =" true "> <br/> <input type =" submit "value =" Get input information "id =" submit2 "/> </div>

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