test.html
4.95 KB
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Live Query Test</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/base/base-min.css">
<style type="text/css" media="screen">
body { margin: 2em; }
#anim { position: fixed; top: 0; right: 0; width: 100px; height: 100px; background-color: #000; }
* html #anim { position: absolute; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script src="../jquery.livequery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
var anim = (function() {
var el = $('#anim');
return function() {
el.toggle(1000, anim);
};
})();
anim();
/*** Example 1-1 ***/
var example1_1 = function() {
$(this)
.text('Clicked')
.blur();
return false;
};
$('input[name=example1-1-add]')
.bind('click', function() {
$('ul#example1-1')
.append('<li><a href="#listitem">List Item</a></li>');
this.blur();
});
$('input[name=example1-1-expire]')
.bind('click', function() {
$('body #example1-1 a')
.expire('click');
this.blur();
this.disabled = true;
$('input[name=example1-1-restart]').attr('disabled', false);
});
$('input[name=example1-1-restart]')
.bind('click', function() {
$('body #example1-1 a')
.livequery('click', example1_1);
$('input[name=example1-1-expire]')[0].disabled = false;
$('input[name=example1-1-restart]').attr('disabled', true).blur();
});
$('#example1-1', 'body')
.find('a')
.livequery('click', example1_1);
/*** Example 1-2 ***/
var matched = function() {
$(this)
.append('<small> (Updated)</small>');
};
var unmatched = function() {
$('small', this)
.remove();
};
$('input[name=example1-2-add]')
.bind('click', function() {
$('ul#example1-2')
.append('<li>List Item</li>');
this.blur();
});
$('input[name=example1-2-expire]')
.bind('click', function() {
$('body #example1-2 li')
.expire(matched, unmatched);
this.blur();
this.disabled = true;
$('input[name=example1-2-restart]').attr('disabled', false);
});
$('input[name=example1-2-restart]')
.bind('click', function() {
$('body #example1-2 li')
.livequery(matched, unmatched);
$('input[name=example1-2-expire]')[0].disabled = false;
$('input[name=example1-2-restart]').attr('disabled', true).blur();
});
$('#example1-2', 'body')
.find('li')
.livequery(matched, unmatched);
});
</script>
</head>
<body>
<div id="anim"></div>
<h1>Live Query: Unordered List Examples (Using Function References)</h1>
<p>A common use-case is when a new list item is added to an unordered list and an event should be bound to it or a script notified of the change.</p>
<h2>Binding an event to each list item</h2>
<p>The list below uses a live query to bind a click event to each list item that changes the text to read 'Clicked'. Expiring the Live Query unbinds the events.</p>
<pre><code>$('#example1-1', 'body')
.find('a')
.livequery('click', function() {
$(this)
.text('Clicked')
.blur();
return false;
});
</code></pre>
<p><input type="button" name="example1-1-add" value="Add New Item"> <input type="button" name="example1-1-expire" value="Expire Live Query"> <input type="button" name="example1-1-restart" disabled="disabled" value="Restart Live Query"><p>
<ul id="example1-1">
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
<li><a href="#listitem">List Item</a></li>
</ul>
<h2>Get notified when a list item is added</h2>
<p>The list below uses a Live Query to call a function when a new list item is added. This function adds the following text to each list item: '(Updated)' and removes it when the Live Query is expired.</p>
<pre><code>var matched = function() {
$(this)
.append('<small>&nbsp;(Updated)</small>');
};
var unmatched = function() {
$('small', this)
.remove();
};
$('#example1-2', 'body')
.find('li')
.livequery(matched, unmatched);
</code></pre>
<p><input type="button" name="example1-2-add" value="Add New Item"> <input type="button" name="example1-2-expire" value="Expire Live Query"> <input type="button" name="example1-2-restart" disabled="disabled" value="Restart Live Query"><p>
<ul id="example1-2">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</body>
</html>