scrollview-rtl.html revision 3ace771448d6553c96d351302b60cf280824eaf6
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright<html dir="rtl">
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 border:dotted 2px orange;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright height:500px;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright #scrollview-content {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright white-space:nowrap;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright }
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright #scrollview-content li{
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright display:inline-block;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright width:398px;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright height:398px;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright border:1px solid red;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright color:black;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright font-size:40px;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright opacity: 0.5;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright background-image: -webkit-linear-gradient(top, red, white, blue);
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright text-align:center;
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('scrollview-base', 'scrollview-paginator', function(Y) {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright var scrollView = new Y.ScrollView({
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright id: "scrollview",
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright srcNode : '#scrollview-content',
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright width: "400px"
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright s = scrollView;
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright scrollView.plug(Y.Plugin.ScrollViewPaginator, {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright selector: 'li',
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright optimizeMemory: true
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright /*
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright scrollView.plug(Y.Plugin.ScrollViewPaginator, {
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright selector: 'li',
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright optimizeMemory: false
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright*/
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright scrollView.render();
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright });
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright </script>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright </head>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <body class="yui3-skin-sam">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <div>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <div id="scrollview-content">
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <ul>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <li>1</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <li>2</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <li>3</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <li>4</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <li>5</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <li>6</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright <li>7</li>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright </ul>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright </div>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright </div>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright </body>
3ace771448d6553c96d351302b60cf280824eaf6Derek Gathright</html>