2009-11-26 04:10:24 +01:00
< !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() {
2010-03-11 03:29:20 +01:00
var anim = (function() {
var el = $('#anim');
return function() {
el.toggle(1000, anim);
};
})();
anim();
2009-11-26 04:10:24 +01:00
/*** Example 1-1 ***/
var example1_1 = function() {
$(this)
.text('Clicked')
.blur();
return false;
};
2010-03-11 03:29:20 +01:00
$('input[name=example1-1-add]')
2009-11-26 04:10:24 +01:00
.bind('click', function() {
$('ul#example1-1')
.append('< li > < a href = "#listitem" > List Item< / a > < / li > ');
this.blur();
});
2010-03-11 03:29:20 +01:00
$('input[name=example1-1-expire]')
2009-11-26 04:10:24 +01:00
.bind('click', function() {
2010-03-11 03:29:20 +01:00
$('body #example1-1 a')
2009-11-26 04:10:24 +01:00
.expire('click');
this.blur();
this.disabled = true;
2010-03-11 03:29:20 +01:00
$('input[name=example1-1-restart]').attr('disabled', false);
2009-11-26 04:10:24 +01:00
});
2010-03-11 03:29:20 +01:00
$('input[name=example1-1-restart]')
2009-11-26 04:10:24 +01:00
.bind('click', function() {
2010-03-11 03:29:20 +01:00
$('body #example1-1 a')
2009-11-26 04:10:24 +01:00
.livequery('click', example1_1);
2010-03-11 03:29:20 +01:00
$('input[name=example1-1-expire]')[0].disabled = false;
$('input[name=example1-1-restart]').attr('disabled', true).blur();
2009-11-26 04:10:24 +01:00
});
2010-03-11 03:29:20 +01:00
$('#example1-1', 'body')
.find('a')
.livequery('click', example1_1);
2009-11-26 04:10:24 +01:00
/*** Example 1-2 ***/
var matched = function() {
$(this)
.append('< small > (Updated)< / small > ');
};
var unmatched = function() {
$('small', this)
.remove();
};
2010-03-11 03:29:20 +01:00
$('input[name=example1-2-add]')
2009-11-26 04:10:24 +01:00
.bind('click', function() {
$('ul#example1-2')
.append('< li > List Item< / li > ');
this.blur();
});
2010-03-11 03:29:20 +01:00
$('input[name=example1-2-expire]')
2009-11-26 04:10:24 +01:00
.bind('click', function() {
2010-03-11 03:29:20 +01:00
$('body #example1-2 li')
2009-11-26 04:10:24 +01:00
.expire(matched, unmatched);
this.blur();
this.disabled = true;
2010-03-11 03:29:20 +01:00
$('input[name=example1-2-restart]').attr('disabled', false);
2009-11-26 04:10:24 +01:00
});
2010-03-11 03:29:20 +01:00
$('input[name=example1-2-restart]')
2009-11-26 04:10:24 +01:00
.bind('click', function() {
2010-03-11 03:29:20 +01:00
$('body #example1-2 li')
2009-11-26 04:10:24 +01:00
.livequery(matched, unmatched);
2010-03-11 03:29:20 +01:00
$('input[name=example1-2-expire]')[0].disabled = false;
$('input[name=example1-2-restart]').attr('disabled', true).blur();
2009-11-26 04:10:24 +01:00
});
2010-03-11 03:29:20 +01:00
$('#example1-2', 'body')
.find('li')
.livequery(matched, unmatched);
2009-11-26 04:10:24 +01:00
});
< / script >
< / head >
< body >
2010-03-11 03:29:20 +01:00
< div id = "anim" > < / div >
2009-11-26 04:10:24 +01:00
< 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 >
2010-03-11 03:29:20 +01:00
< pre > < code > $('#example1-1', 'body')
.find('a')
.livequery('click', function() {
$(this)
.text('Clicked')
.blur();
return false;
});
2009-11-26 04:10:24 +01:00
< / 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();
};
2010-03-11 03:29:20 +01:00
$('#example1-2', 'body')
.find('li')
.livequery(matched, unmatched);
2009-11-26 04:10:24 +01:00
< / 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 >
