tests/manual/scrollview-list-plugin.html

	scrollview-list-plugin.html revision 27d03bec5e86257829ba6abd01f608e6fdf63a28
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Y.ScrollView List Plugin</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">

        <link rel="stylesheet" href="/build/scrollview-base/assets/skins/night/scrollview-base.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="/build/scrollview-list/assets/skins/night/scrollview-list.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="/build/scrollview-scrollbars/assets/skins/night/scrollview-scrollbars.css" type="text/css" media="screen" title="no title" charset="utf-8">

        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>

        <style>
            .yui3-scrollview {
                margin:2em;
            }

            html {
                background-color:#444;
            }

            .yui3-skin-night {
                /* temp workaround */
                background-color:inherit;
            }
        </style>
    </head>

    <body>
        <div class="yui3-skin-night">
            <div id="scrollable" class="yui3-scrollview-loading">
                <ul>
                    <li><div>Purchased</div></li>
                    <li><div>Air</div></li>
                    <li><div>Amelie</div></li>
                    <li><div>Ben Folds</div></li>
                    <li><div>Ben Harper</div></li>
                    <li><div>Blue October</div></li>
                    <li><div>Bob Dylan</div></li>
                    <li><div>Cake</div></li>
                    <li><div>Citizen Cope</div></li>
                    <li><div>Coldplay</div></li>
                    <li><div>Dido</div></li>
                    <li><div>Lily Allen</div></li>
                </ul>
            </div>
        </div>

        <div class="yui3-skin-sam">
            <div id="scrollable2" class="yui3-scrollview-loading">
                <ul class="foo">
                    <li class="bar"><div>Purchased</div></li>
                    <li class="bar"><div>Air</div></li>
                    <li class="bar"><div>Amelie</div></li>
                    <li class="bar"><div>Ben Folds</div></li>
                    <li class="bar"><div>Ben Harper</div></li>
                    <li class="bar"><div>Blue October</div></li>
                    <li class="bar"><div>Bob Dylan</div></li>
                    <li class="bar"><div>Cake</div></li>
                    <li class="bar"><div>Citizen Cope</div></li>
                    <li class="bar"><div>Coldplay</div></li>
                    <li class="bar"><div>Dido</div></li>
                    <li class="bar"><div>Lily Allen</div></li>
                </ul>
            </div>
        </div>

        <script type="text/javascript" charset="utf-8">

            YUI({filter:"raw"}).use('scrollview',"scrollview-list", function(Y) {
                var scrollView = new Y.ScrollView({
                    srcNode: '#scrollable',
                    height: 200,
                    width: 300,
                    plugins: [Y.Plugin.ScrollViewList],
                    render:true
                });
            });

            YUI({filter:"raw"}).use('scrollview',"scrollview-list", function(Y) {
                var scrollView = new Y.ScrollView({
                    srcNode: '#scrollable2',
                    height: 200,
                    width: 300,
                    render:true
                });

                scrollView.plug(Y.Plugin.ScrollViewList);
            });
        </script>
    </body>
</html>