silverstripe-framework/thirdparty/jquery-livequery/test/test2.html
Ingo Schommer a61f4ed475 ENHANCEMENT Updated jquery.livequery from v1.0.2 to v1.1.1 (located in sapphire/thirdparty/jquery-livequery/
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/branches/2.4@100847 467b73ca-7a2a-4603-9d3b-597d59a354a9
2011-02-02 14:18:54 +13:00

163 lines
5.4 KiB
HTML

<!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>