<!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', function() {
								$(this)
									.text('Clicked')
									.blur();
								return false;
							});
						$('input[name=example1-1-expire]')[0].disabled = false;
						$('input[name=example1-1-restart]').attr('disabled', true).blur();
					});
				$('#example1-1', 'body')
					.find('a')
						.livequery('click', function() {
							$(this)
								.text('Clicked')
								.blur();
							return false;
						});
				
				/*** Example 1-2 ***/
				var matched = function() {
					$(this)
						.append('<small>&nbsp;(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();
						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(function() {
								$(this)
									.append('<small>&nbsp;(Updated)</small>');
							}, function() {
								$('small', this)
									.remove();
							});
						$('input[name=example1-2-expire]')[0].disabled = false;
						$('input[name=example1-2-restart]').attr('disabled', true).blur();
					});
				$('body #example1-2')
					.find('li')
						.livequery(function() {
							$(this)
								.append('<small>&nbsp;(Updated)</small>');
						}, function() {
							$('small', this)
								.remove();
						});
			});
		</script>
	</head>
	<body>
		<div id="anim"></div>
		<h1>Live Query: Unordered List Examples (Using Anonymous Functions)</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>$('ul#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('&lt;small&gt;&amp;nbsp;(Updated)&lt;/small&gt;');
};
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>