jquery tab Edit Plugin tagit usage guide

Source: Internet
Author: User

JQuery Tagit plug-in effect is still good, today to use the plug-in, below to give you a detailed explanation of the specific use of this plug-in. Here recommended to you, the need for small partners can refer to the next.

A. Tagit plug-in function

Enhance the interactivity of the website and increase the user experience. As for the other functions, there really isn't. You can replace it with an input text. But text does not have an input hint, and Tagit owns this feature. The official example shows the following figure:

Label the keyword as a whole. Easy to delete and browse.

Two. Tagit official address


There are instructions on the official address, also useful examples. The color collocation of use cases can also be selected. But choose to choose to go is these several, Tagit plug-in uses jQueryUI, so the style that jQueryUI provides is also compatible. jQueryUI is also a jquery plug-in that provides a very functional interface element. jQueryUI also offers a number of styles for us to choose from, but choose between those. Want to modify the point, but found that some elements of the style modification is very difficult, change a place, inadvertently changed the other places. Some places also offer free style for jQueryUI plug-ins, and of course there are charges. What we call the extension of the Tagit plug-in type jQueryUI.

Tagit style changes back to simple, in the test I will simply modify the Tagit style, just to demonstrate how to modify. There are many ways to modify styles, and this is just one of them.

Tagit supports event actions, such as editing, editing, before deleting, and after deletion, which can trigger events.

Three. Tagit Use method

The use of Tagit is very simple, but there are more files to be referenced. Because Tagit is an extension of jQueryUI, we reference jquery and also reference jQueryUI, as well as the jQueryUI style. And then add to yourself.

1. Reference file


1 2 3 4 5 <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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 The 25 26 #container {width:400px} input[type=submit]{padding:8px}/* Define Border */#singleFieldTags {border:1px solid #b1c9dc; backgr Ound: #e7e3ca; /* Define INPUT element text*/#singleFieldTags input{background: #e7e3ca; Color:blue}/* Define label Style * * #singleFieldTags li{background:# E7E3CA; border:1px solid #930; color:red; }/* The parent element of the first INPUT element */#singleFieldTags. tagit-new{Border:none}

3.js Code


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20-21 $ (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 ({//input hint availabletags:sampletags,///associated with assignment operation Singlefield:true, allowspaces:true,// Whether the label allows space Singlefieldnode: $ (' #mySingleField ')//save value to Mysinglefield element}); $ (' #submit1 '). Click (function () {Alert ($ (' #myTagsValues '). Val ()); $ (' #submit2 '). Click (function () {Alert ($ (' #mySingleField '). Val ()); });

4. Use of HTML


1 2 3 4, 5 6 7 8 9 10 11 12 13 14 15 <div id= "Container" > <p><b> test Cases 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> binding default keywords, allowing spaces </b></p> <p> modified styles when adding keywords </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 mentioned is the entire content of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.