tests/manual/scrollview-dynamic.html

	scrollview-dynamic.html revision 319dda44f5f6791ff8c130f3200eca33bd3f3c7f
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright<html>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright    <head>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <title>ScrollView Example</title>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <!--<script src=".http://yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js" type="text/javascript" charset="utf-8"></script>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        -->
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <style>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        #scrollview-bounding {
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            border:dotted 2px orange;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            height:500px;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        }
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        #scrollview-content {
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            white-space:nowrap;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        }
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        #scrollview-content li{
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            display:inline-block;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            width:398px;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            height:398px;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            border:1px solid red;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            color:black;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            font-size:40px;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            opacity: 0.5;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            background-image: -webkit-linear-gradient(top, red, white, blue);
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            text-align:center;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        }
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        </style>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <script type="text/javascript" charset="utf-8">
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        var s;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        YUI({
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            debug: true,
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            filter:"raw"
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        }).use('scrollview-base', 'scrollview-paginator', function(Y) {
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            var scrollView = new Y.ScrollView({
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                id: "scrollview",
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                srcNode : '#scrollview-content',
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                width: "400px"
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            });
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            scrollView.plug(Y.Plugin.ScrollViewPaginator, {
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                selector: 'li',
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                optimizeMemory: true
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            });
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            scrollView.render();
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            var interval = setInterval(function(){
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                var len = scrollView.pages._pageNodes.size();
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                scrollView.pages._pageNodes.push(Y.Node.create('<li>' + len + '</li>'));
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                if (len > 8) {
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                    clearInterval(interval);
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                    scrollView.pages.set('total', scrollView.pages._pageNodes.size());
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                }
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            }, 10);
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            s = scrollView;
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        });
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        </script>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright    </head>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright    <body class="yui3-skin-sam">
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        <div>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            <div id="scrollview-content">
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                <ul>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                    <li>0</li>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                    <li>1</li>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                    <li>2</li>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                    <li>3</li>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright                </ul>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright            </div>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright        </div>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright    </body>
319dda44f5f6791ff8c130f3200eca33bd3f3c7fDerek Gathright</html>