tests/manual/scrollview-list-plugin.html

	scrollview-list-plugin.html revision b4f63b5004437b5ceb6105ac990342ebd3b990d6
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
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra    </head>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra    <body class="yui3-skin-night">
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>
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
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>
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
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>
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
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
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra            YUI({filter:"raw"}, {skin: {defaultSkin:'night'}}).use('scrollview-base',"scrollview-list", function(Y) {
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                var scrollView = new Y.ScrollView({
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra                    contentBox: '#scrollable',
fd555184d589189f6f65318c7a0e2c64b52e10dbTilo Mitra                    height: 300,
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();
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra                //scrollView.syncUI();
b4f63b5004437b5ceb6105ac990342ebd3b990d6Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra            });
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra        </script>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra    </body>
d8c5cc03c19c683d131295b5d3001c983d6dc2d1Tilo Mitra</html>