scrollview_paging.html revision b4f63b5004437b5ceb6105ac990342ebd3b990d6
10139N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
10139N/A<html>
10139N/A <head>
11314N/A <title>Y.ScrollView (x-paging)</title>
10139N/A <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10139N/A
10139N/A <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
10139N/A<!-- <link rel="stylesheet" href="assets/tests.css" type="text/css" media="screen" title="no title" charset="utf-8">
10139N/A -->
10139N/A <style type="text/css" media="screen">
10139N/A #scrollable {
10139N/A white-space: nowrap;
10139N/A text-align: center;
11838N/A }
11989N/A
11002N/A #scrollable li {
10139N/A border-bottom: 0;
10139N/A }
10139N/A </style>
11256N/A
10142N/A <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
11358N/A
10139N/A </head>
11358N/A
11358N/A <body class="yui3-skin-sam">
11358N/A <div class="header">
11358N/A <h1>Y.ScrollView: Paging</h1>
11358N/A </div>
11358N/A
11002N/A <div id="scrollable" class="yui3-scrollview-loading paged">
11002N/A <ul>
11991N/A <li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid red" /></li>
11991N/A <li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid blue" /></li>
10139N/A <li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid green" /></li>
10139N/A <li><img src="http://farm4.static.flickr.com/3358/3644583408_d7e8d4ee44.jpg" style="border:2px solid yellow" /></li>
10139N/A </ul>
10139N/A </div>
10139N/A
10139N/A <div id="pager">
10139N/A <button id="prev-page">Prev</button>
10139N/A <button id="next-page">Next</button>
10139N/A </div>
10139N/A
10139N/A <script type="text/javascript" charset="utf-8">
10139N/A YUI({filter:"raw"}).use('dump', 'scrollview', 'scrollview-paginator', function(Y) {
10139N/A
10139N/A var scrollView = new Y.ScrollView({
10139N/A contentBox : '#scrollable',
10139N/A width : 320
10139N/A });
10139N/A
10139N/A scrollView.plug(Y.Plugin.ScrollViewPaginator, {
10139N/A selector: 'li'
10139N/A });
10139N/A
10139N/A scrollView.render();
10139N/A
10139N/A Y.one('#next-page').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
10139N/A Y.one('#prev-page').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
10139N/A
10139N/A });
10139N/A </script>
10139N/A </body>
10139N/A</html>
10139N/A