forked from aehlke/tag-it
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
81 lines (77 loc) · 3.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Tag Editor</title>
<style type="text/css">
html{font-size: 62.5%;}
a{text-decoration:underline;}
p{margin-bottom:10px;line-height:18px;}
body,
input,
a{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;color: #333;font-size:12px;}
#content{width:600px;margin:20px 0 20px 40px;}
.myform{padding:20px 0px;}
.myform div.line{clear:both;min-height:50px;margin-bottom:15px;}
.myform label{display:block;font-weight:bold;margin-bottom:5px;}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jquery.ui.tagit.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.ui.tagit.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#mytags1").tagit({
availableTags: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]
});
$("#mytags2").tagit({
fieldName:"uebbaa",
availableTags:['github','sex','nice','hardcore','very nice'],
setTags:['sex','github'],
allowSpaces:true
});
$("#mytags3").tagit({
fieldName:"ulala",
availableTags:['github','sex','nice','hardcore'],
setTags:['sex','github'],
onlyAvailableTags:true,
allowSpaces:false
});
$("input.clearTags").click(function(){$('#mytags2').tagit('removeAll');});
$("input.clearTags2").click(function(){$('#mytags3').tagit('removeAll');});
});
</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 1</label>
<ul id="mytags1"></ul>
</div>
<div class="line">
<label for="tags">Tags 2</label>
<ul id="mytags2"></ul>
<input type="button" value="Clear Tags" class="clearTags">
</div>
<div class="line">
<label for="tags">Tags 3 (Only available tags) Try: github, sex, nice, hardcore</label>
<ul id="mytags3"></ul>
<input type="button" value="Clear Tags" class="clearTags2">
</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>Originally created by <a href="http://levycarneiro.com/">Levy Carneiro Jr</a>.
<p>Currently maintained by <a href="http://github.com/aehlke">Alex Ehlke</a>.</p>
<p>Upgraded by <a href="http://lagden.art.br/">Thiago Lagden</a></p>
</div>
</form>
</div>
</body>
</html>