forked from aehlke/tag-it
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
88 lines (79 loc) · 3.3 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.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'
});
$("#myTags2").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]
singleField: true,
singleFieldNode: $('#mySingleField')
});
});
</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">
<input type="submit" value="Submit" />
</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>
<hr>
<form class="myform">
<div class="line">
<p>Example using a single input form field to hold all the tag values, instead of one per tag (see settings.singleField):</p>
</div>
<div class="line">
<p>
Normally this input field will be hidden -- but we leave it visible here so you can see how it is manipulated by the widget:<br>
<input name="tags" id="mySingleField" value="Tag1, Tag2">
</p>
</div>
<div class="line">
<label for="tags">Tags</label>
<ul id="myTags2">
<!-- Existing list items will be pre-added to the tags -->
</ul>
</div>
<div class="line">
<a href="#" onclick="$('#myTags2').tagit('removeAll');">Clear tags</a>
</div>
<div class="line">
<input type="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>