tests/manual/scrollview-list-plugin.html

d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra<html>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra    <head>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <title>Y.ScrollView List Plugin</title>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <link rel="stylesheet" href="/build/scrollview-base/assets/skins/night/scrollview-base.css" type="text/css" media="screen" title="no title" charset="utf-8">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <link rel="stylesheet" href="/build/scrollview-list/assets/skins/night/scrollview-list.css" type="text/css" media="screen" title="no title" charset="utf-8">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <link rel="stylesheet" href="/build/scrollview-scrollbars/assets/skins/night/scrollview-scrollbars.css" type="text/css" media="screen" title="no title" charset="utf-8">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <style>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            .yui3-scrollview {
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                margin:2em;
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            }
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            html {
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                background-color:#444;
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            }
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            .yui3-skin-night {
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                /* temp workaround */
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                background-color:inherit;
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            }
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        </style>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai    </head>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai    <body>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <div class="yui3-skin-night">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            <div id="scrollable" class="yui3-scrollview-loading">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                <ul>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Purchased</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Air</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Amelie</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Ben Folds</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Ben Harper</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Blue October</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Bob Dylan</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Cake</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Citizen Cope</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Coldplay</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Dido</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li><div>Lily Allen</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                </ul>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <div class="yui3-skin-sam">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            <div id="scrollable2" class="yui3-scrollview-loading">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                <ul class="foo">
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Purchased</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Air</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Amelie</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Ben Folds</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Ben Harper</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Blue October</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Bob Dylan</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Cake</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Citizen Cope</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Coldplay</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Dido</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    <li class="bar"><div>Lily Allen</div></li>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                </ul>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            </div>
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai        <script type="text/javascript" charset="utf-8">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            YUI({filter:"raw"}).use('scrollview',"scrollview-list", function(Y) {
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                var scrollView = new Y.ScrollView({
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    srcNode: '#scrollable',
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    height: 200,
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    width: 300,
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    plugins: [Y.Plugin.ScrollViewList],
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    render:true
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                });
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            });
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai            YUI({filter:"raw"}).use('scrollview',"scrollview-list", function(Y) {
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                var scrollView = new Y.ScrollView({
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    srcNode: '#scrollable2',
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    height: 200,
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    width: 300,
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                    render:true
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                });
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
27d03bec5e86257829ba6abd01f608e6fdf63a28Satyen Desai                scrollView.plug(Y.Plugin.ScrollViewList);
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra            });
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        </script>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra    </body>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra</html>