tests/manual/scrollview-dom.html

	scrollview-dom.html revision f4093e4718eac9fb141f68315b22f18502ac8933
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright<html>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright    <head>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        <title>ScrollView Example</title>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        <style>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        #scrollview-bounding {
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            xborder:dotted 2px orange;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            height:500px;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        }
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        #scrollview-content {
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            white-space:nowrap;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        }
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        #scrollview-content li{
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            display:inline-block;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            width:298px;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            height:298px;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            border:1px solid red;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            color:black;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            font-size:40px;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            opacity: 0.5;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            background-image: -webkit-linear-gradient(top, red, white, blue);
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            text-align:center;
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        }
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        </style>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        <script type="text/javascript" charset="utf-8">
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        YUI({
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            debug: true,
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            filter:"raw"
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        }).use('scrollview-base', 'scrollview-paginator', function(Y) {
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            for (var j=0; j<100; j++){
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright                Y.one("#scrollview-content ul").append("<li>" + j + "</li>");
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            }
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            var scrollView = new Y.ScrollView({
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright                id: "scrollview",
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright                srcNode : '#scrollview-content',
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright                width: "300px"
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            });
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            scrollView.plug(Y.Plugin.ScrollViewPaginator, {
f4093e4718eac9fb141f68315b22f18502ac8933Derek Gathright                selector: 'li',
f4093e4718eac9fb141f68315b22f18502ac8933Derek Gathright                optimizeDOM: true
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            });
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            scrollView.render();
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        });
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        </script>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright    </head>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright    <body class="yui3-skin-sam">
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        <div>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            <div id="scrollview-content">
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright                <ul></ul>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright            </div>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright        </div>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright    </body>
8e13c83ce63d62a3d331fa7fda05d5ff73c77f0fDerek Gathright</html>