tests/manual/scrollview-articles.html

3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright<html>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright    <head>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <title>ScrollView Example</title>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <!--<script src=".http://yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js" type="text/javascript" charset="utf-8"></script>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        -->
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <style>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        #scrollview-bounding {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        #scrollview-content {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            margin: 0 auto;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            white-space: nowrap;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        #scrollview-content li{
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            display: inline-block;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            vertical-align: top;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            white-space: normal;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            width: 100%;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            line-height:1.5em;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            padding:10px;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        #scrollview-content h1 {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            font-size:175%;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            font-weight:bold;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            padding:5px;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        #scrollview-content h3 {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            font-size:125%;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            font-weight:bold;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        #scrollview-content p
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        #scrollview-content h3 {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            padding:3px;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        </style>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <script type="text/javascript" charset="utf-8">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        var s;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        YUI({
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            debug: true,
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            filter:"raw"
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        }).use('cssbutton', 'yql', 'scrollview-base', 'scrollview-paginator', function(Y) {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            var scrollView = new Y.ScrollView({
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                id: "scrollview",
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                srcNode : '#scrollview-content',
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                width: "800px"
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            scrollView.plug(Y.Plugin.ScrollViewPaginator, {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                selector: 'li',
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                optimizeMemory: true
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            scrollView.render();
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            Y.YQL("select * from rss where url = 'http://feeds.yuiblog.com/YahooUserInterfaceBlog'", function(results) {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                var posts = results.query.results.item;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                Y.Array.each(posts, function(post){
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                    scrollView.pages._pageNodes.push(Y.Node.create('<li><h1>' + post.title + '</h1>' + post.description + '</li>'));
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright                scrollView.pages.set('total', scrollView.pages._pageNodes.size());
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            s = scrollView;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            Y.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            Y.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        </script>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright    </head>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright    <body class="yui3-skin-sam">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <button id="scrollview-prev" class='yui3-button'><< Prev</button>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <button id="scrollview-next" class='yui3-button'>Next >> </button>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        <ul id="scrollview-content">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            <li>1</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            <li>2</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright            <li>3</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright        </ul>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright    </body>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright</html>