mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-07-07 20:09:31 +02:00
141 lines
5.0 KiB
HTML
141 lines
5.0 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', 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> |