-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex.html
executable file
·66 lines (64 loc) · 2.13 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>inputTags</title>
<link rel="stylesheet" href="src/inputTags.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="src/index.js"></script>
<script stype="text/javascript">
jQuery(document).ready(function($) {
var tags = $('#tags').inputTags({
tags: [],
autocomplete: {
values: ['Pellentesque', 'habitant', 'morbi', 'tristique', 'senectus', 'netus', 'malesuada', 'fames', 'turpis', 'egestas', 'Vestibulum']
},
init: function(elem) {
$('span', '#events').text('init');
$('<p class="results">').html('<strong>Tags:</strong> ' + elem.tags.join(' - ')).insertAfter(elem.$list);
},
create: function() {
$('span', '#events').text('create');
},
update: function() {
$('span', '#events').text('update');
},
destroy: function() {
$('span', '#events').text('destroy');
},
selected: function() {
$('span', '#events').text('selected');
},
unselected: function() {
$('span', '#events').text('unselected');
},
change: function(elem) {
$('.results').empty().html('<strong>Tags:</strong> ' + elem.tags.join(' - '));
},
autocompleteTagSelect: function(elem) {
console.info('autocompleteTagSelect');
}
});
$('#tags').inputTags('tags', 'habitant', function(tags) {
$('.results').empty().html('<strong>Tags:</strong> ' + tags.join(' - '));
});
var autocomplete = $('#tags').inputTags('options', 'autocomplete');
$('span', '#autocomplete').text(autocomplete.values.join(', '));
});
</script>
</head>
<body>
<div class="container">
<h1><span class="color">inputTags</span> jQuery plugin</h1>
<input type="text" id="tags" value="" />
<p id="events">
<strong>Event: </strong>
<span></span>
</p>
<p id="autocomplete">
<strong>Autocomplete: </strong>
<span></span>
</p>
</div>
</body>
</html>