Speed up development with full-stack environments for every branch.

Learn More

How to add tags using jQuery and jQuery UI Tagit Plugin

Forked from How to use the jQuery Selector.

3626 Runs 14095 Views 3589 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!doctype html>
<html>
<head>
  <title>How to add tags using jQuery and jQuery UI Tagit Plugin.</title>

	<script src="js/jquery.1.7.2.min.js"></script>
	<script src="js/jquery-ui.1.8.20.min.js"></script>
	<script src="js/tagit.js"></script>

	<link href="css/demo.css" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" type="text/css" href="css/tagit-stylish-yellow.css">

	<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>

<div id="wrap">

	<h1>How to add tags using jQuery and jQuery UI Tagit Plugin.</h1>

	<!--
		We have also used button when 
		you click on that buttons
		it will show alert box with result of tags
	-->
	<h2><a name="demos">Demos</a></h2>
	<!--
		html for preloaded tags,
	-->
	<h3>Initial Tags</h3>

	<div class="box">
		<div class="note">
			You can manually specify tags in your markup by adding <em>list items</em> to the unordered list!
		</div>
		<!--
			add li with data-value attribute and html
		-->
		<ul id="demo2" data-name="demo2">
			<li data-value="here">here</li>
			<li data-value="are">are</li>
			<li data-value="some">some</li>
			<li data-value="initial">initial</li>
			<li data-value="tags">tags</li>
		</ul>
		<div class="buttons">
			<button id="demo2GetTags" value="Get Tags">Get Tags</button>
			<button id="demo2ResetTags" value="Reset Tags">Reset Tags</button>
		</div>
	</div>

	<!--
		with call back with sortable and allowing space
	-->
	<h3>Callback, Allowing Spaces &amp; Sortable</h3>

	<div class="box">
		<div class="note">
			By passing a function in for <em>tagsChanged</em> you can preform your own events too!
			<br />
			By overriding the trigger keys you can have spaces, comma's and any other character in your tags!
			<br />
			You can allow the tags to be sortable by dragging the entire tag!
		</div>

		<ul id="demo4"></ul>
		<div class="buttons">
			<button id="demo4GetTags" value="Get Tags">Get Tags</button>
		</div>
		<!--
			call back result will shown here
		-->
		<p>Action:<div id="demo4Out">none</div><p>
	</div>


	<!--
		editable
	-->
	<h3>Editable</h3>

	<div class="box">
		<div class="note">
			Click on a tag to edit it!
		</div>

		<ul id="demo9" name="demo9">
			<li>here</li>
			<li>are</li>
			<li>some</li>
			<li>initial</li>
			<li>tags</li>
		</ul>
		<div class="buttons">
			<button id="demo9GetTags" value="Get Tags">Get Tags</button>
		</div>
	</div>
</div>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).