tests/manual/scrollview_paging.html

	scrollview_paging.html revision 0ea25ffeeb3e840733740fec918abaf4d3ddac91
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Y.ScrollView (x-paging)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
	    <link rel="stylesheet" href="assets/tests.css" type="text/css" media="screen" title="no title" charset="utf-8">

    	<style type="text/css" media="screen">
    	#scrollable {
    	    white-space: nowrap;
    	    text-align: center;
    	}

    	#scrollable li {
    	    border-bottom: 0;
    	}
    	</style>

    	<script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body class="yui-skin-sam">
        <div class="header">
        	<h1>Y.ScrollView: Paging</h1>
        </div>

        <div id="scrollable" class="yui3-scrollview-loading paged">
			<ul>
				<li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid red" /></li>
				<li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid blue" /></li>
				<li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid green" /></li>
				<li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid yellow" /></li>
			</ul>
        </div>

    	<div id="pager">
    		<button id="prev-page">Prev</button>
    		<button id="next-page">Next</button>
    	</div>

        <script type="text/javascript" charset="utf-8">
    	YUI({filter:"raw"}).use('scrollview', 'scrollview-paginator', function(Y) {

            var scrollView = new Y.ScrollView({
                contentBox : '#scrollable',
                width : 320,
                flick : {
                    minVelocity:0.3
                }
            });

    		scrollView.plug(Y.Plugin.ScrollViewPaginator, {
    		    selector: 'li'
    		});

    		scrollView.render();

    		Y.one('#next-page').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
    		Y.one('#prev-page').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));

        });
        </script>
    </body>
</html>