-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
117 lines (110 loc) · 4.47 KB
/
index.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Superbly TagField Demo</title>
<link rel="stylesheet" href="superbly-tagfield.css" />
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="superbly-tagfield.min.js"></script>
<script type="text/javascript">
$(function() {
var carTags = ['Alfa Romeo','Aston Martin','Audi','Bentley','Bugatti','BMW','Citroen','Cadillac','Chevrolet','Dodge','Daewoo','Ferrari','Ford','Fiat','Honda','Hyundai','Jaguar','Jeep','Kia','Lada','Lexus','Lotus','Maserati','Mazda','Mercedes','Nissan','Opel','Peugeot','Porsche','Rover','Renault','Suzuki','Subaru','Seat','Toyota','Volvo','Vauxhall','VW'];
// Initialize Demo 1
$("#tagfield1").superblyTagField({
allowNewTags: false,
showTagsNumber: 10,
preset: ['Audi','Bentley'],
tags: carTags
});
// Initialize Demo 2
$("#tagfield2").superblyTagField({
allowNewTags: true,
showTagsNumber: 10,
preset: ['Audi','Bugatti'],
tags: carTags
});
// Initialize Demo 3
$("#tagfield3").superblyTagField({
allowNewTags: true,
showTagsNumber: 10,
addItemOnBlur: true,
preset: ['Audi','Bugatti'],
tags: carTags
});
// Initialize Demo 4
$("#tagfield4").superblyTagField({
allowNewTags: false,
allowedTagsNumber: 5,
showTagsNumber: 10,
preset: ['Audi','Bugatti'],
tags: carTags
});
// Initialize Demo 5
$("#tagfield5").superblyTagField({
caseSensitive: false,
allowNewTags: true,
showTagsNumber: 10,
preset: ['Audi','Bugatti'],
tags: carTags
});
// Initialize Demo 6
$("#tagfield6").superblyTagField({
caseSensitive: false,
allowNewTags: true,
showTagsNumber: 10,
preset: ['Audi','Bugatti'],
tags: carTags,
onRemove: function(tag) {
var c = confirm('Remove the tag: "' + tag + '"?');
if(c == true) {
return true;
}
else {
return false;
}
}
});
// Display an alert dialog with the tags when the "show tags" buttons are pressed
$('#tagDemoButton1').click(function(e){
alert($("#tagfield1").val());
});
$('#tagDemoButton2').click(function(e){
alert($("#tagfield2").val());
});
$('#tagDemoButton3').click(function(e){
alert($("#tagfield3").val());
});
$('#tagDemoButton4').click(function(e){
alert($("#tagfield4").val());
});
$('#tagDemoButton5').click(function(e){
alert($("#tagfield5").val());
});
$('#tagDemoButton6').click(function(e){
alert($("#tagfield6").val());
});
});
</script>
</head>
<body>
<h2>Superbly Tagfield Demo</h2>
<p>Demo 1 (don't allow new tags):</p>
<input type="text" id="tagfield1" />
<input style="margin:3px;" type="button" id="tagDemoButton1" value="show tags">
<p>Demo 2 (allow new tags):</p>
<input type="text" id="tagfield2" />
<input style="margin:3px;" type="button" id="tagDemoButton2" value="show tags">
<p>Demo 3 (allow new tags, add item on blur):</p>
<input type="text" id="tagfield3" />
<input style="margin:3px;" type="button" id="tagDemoButton3" value="show tags">
<p>Demo 4 (allow only 5 tags):</p>
<input type="text" id="tagfield4" />
<input style="margin:3px;" type="button" id="tagDemoButton4" value="show tags">
<p>Demo 5 (allow new tags case insensitive):</p>
<input type="text" id="tagfield5" />
<input style="margin:3px;" type="button" id="tagDemoButton5" value="show tags">
<p>Demo 6 (confirm deletion with onRemove callback):</p>
<input type="text" id="tagfield6" />
<input style="margin:3px;" type="button" id="tagDemoButton6" value="show tags">
</body>
</html>