Просмотр архива SilverStripe


<?php

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

?>