forked from martinrehfeld/tag-it
-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
53 lines (47 loc) · 2.18 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tag Editor - example</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/master.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui/jquery.ui.autocomplete.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui/jquery-ui-1.8.core-and-interactions.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui/jquery-ui-1.8.autocomplete.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ie-compat.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#mytags").tagit({
availableTags: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"],
// configure the name of the input field (will be submitted with form), default: item[tags]
itemName: 'item',
fieldName: 'tags'
});
});
</script>
</head>
<body>
<div id="content">
<form class="myform">
<div class="line">
<p><strong>Tag it!</strong> ~ Tag editor and suggestions</p>
<p>After looking for a jQuery plugin for handling a 'tag suggestion' form field, in much the same way ZenDesk.com does, I ended up developing a customization of jQuery UI that does the same interaction.</p>
</div>
<div class="line">
<label for="tags">Tags</label>
<ul id="mytags">
<!-- Existing list items will be pre-added to the tags -->
<li>Tag1</li>
<li>Tag2</li>
</ul>
</div>
<div class="line">
<p>Built with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://jqueryui.com/" target="_blank">jQueryUI</a>.</p>
<p>By <a href="http://levycarneiro.com/">Levy Carneiro Jr</a></p>
</div>
</form>
</div>
</body>
</html>