scrollview_paging.html revision 6448ea60e198da82d2ea7fc33d1f1ecf3c3c8b74
<!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="yui3-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('dump', 'scrollview', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
contentBox : '#scrollable',
width : 320
});
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>