tests/manual/scrollview-list-plugin.html

	scrollview-list-plugin.html revision d8c5cc03c19c683d131295b5d3001c983d6dc2d1
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>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <title>Y.ScrollView (y)</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
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <link rel="stylesheet" href="assets/tests.css" type="text/css" media="screen" title="no title" charset="utf-8">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra    </head>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra    <body class="yui3-skin-sam">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <div class="header">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra            <h1>Y.ScrollView</h1>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <div id="scrollable" class="yui3-scrollview-loading">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra            <ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>I am a div with some LI content inside me!
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        <ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI content 1</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI Content 2</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI Content 3</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        </ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Purchased</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Air</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Amelie</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Ben Folds</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Ben Harper</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Blue October</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Bob Dylan</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Cake</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Citizen Cope</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Coldplay</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Dido</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>I am a div with some LI content inside me!
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        <ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI content 1</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI Content 2</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI Content 3</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        </ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Lily Allen</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Purchased on the iPhone</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Purchased</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Air</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Amelie</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Ben Folds</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Ben Harper</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>I am a div with some LI content inside me!
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        <ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI content 1</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI Content 2</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                            <li>LI Content 3</li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        </ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Bob Dylan</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Cake</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Citizen Cope</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Coldplay</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Dido</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Foo Fighters</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                <li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    <div>Lily Allen</div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                </li>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra            </ul>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        </div>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <script type="text/javascript" charset="utf-8">
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra            YUI({filter:"raw"}).use('scrollview-base','scrollview-list', function(Y) {
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                var scrollView = new Y.ScrollView({
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    contentBox: '#scrollable',
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    height: 372,
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    flick : {
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        minDistance:0,
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                        minVelocity:0
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    },
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    plugins: [Y.Plugin.ScrollViewList]
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                });
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                scrollView.render();
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra            });
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        </script>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra    </body>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra</html>