src/cm/media/js/lib/yui/yui_3.10.3/docs/scrollview/index.html
author Yves-Marie Haussonne <ymh.work+github@gmail.com>
Fri, 09 May 2014 18:35:26 +0200
changeset 656 a84519031134
parent 525 89ef5ed3c48b
permissions -rw-r--r--
add link to "privacy policy" in the header test
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
525
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     1
<!DOCTYPE html>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     2
<html lang="en">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     3
<head>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     4
    <meta charset="utf-8">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     5
    <title>ScrollView</title>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     6
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     7
    <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     8
    <link rel="stylesheet" href="../assets/css/main.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     9
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    10
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    11
    <script src="../../build/yui/yui-min.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    12
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    13
</head>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    14
<body>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    15
<!--
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    16
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    17
-->
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    18
<div id="doc">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    19
    <div id="hd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    20
        <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    21
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    22
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    23
        <a href="#toc" class="jump">Jump to Table of Contents</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    24
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    25
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    26
            <h1>ScrollView</h1>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    27
    <div class="yui3-g">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    28
        <div class="yui3-u-3-4">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    29
            <div id="main">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    30
                <div class="content"><div class="intro">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    31
    <p>ScrollView's main use case is to provide a scrollable content widget for touch devices on which overflow scrollbars are not natively supported. However, it is built on top of YUI's cross-platform/browser gesture and transition layers, so it can also be used to provide flickable scrolling on mouse-based devices across on all the A-grade browsers.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    32
    <p>The <code>ScrollViewScrollbars</code> plugin can be added to the base scrollview to provide a scroll indicator. The <code>ScrollViewPaginator</code> plugin can be added to provide a cross-platform paginated scrolling implementation (a simple carousel).</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    33
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    34
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    35
<h2 id="getting-started">Getting Started</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    36
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    37
<p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    38
To include the source files for ScrollView and its dependencies, first load
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    39
the YUI seed file if you haven't already loaded it.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    40
</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    41
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    42
<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.10.3&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    43
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    44
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    45
<p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    46
Next, create a new YUI instance for your application and populate it with the
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    47
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    48
YUI will automatically load any dependencies required by the modules you
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    49
specify.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    50
</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    51
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    52
<pre class="code prettyprint">&lt;script&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    53
&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    54
YUI().use(&#x27;scrollview&#x27;, function (Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    55
    &#x2F;&#x2F; ScrollView is available and ready for use. Add implementation
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    56
    &#x2F;&#x2F; code here.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    57
});
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    58
&lt;&#x2F;script&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    59
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    60
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    61
<p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    62
For more information on creating YUI instances and on the
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    63
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    64
documentation for the <a href="../yui/index.html">YUI Global Object</a>.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    65
</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    66
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    67
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    68
<p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    69
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    70
page's <code>&lt;body&gt;</code> element or to a parent element of the widget in order to apply
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    71
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    72
</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    73
<pre class="code prettyprint">&lt;body class=&quot;yui3-skin-sam&quot;&gt; &lt;!-- You need this skin class --&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    74
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    75
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    76
<h2 id="using">Using ScrollView</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    77
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    78
<h3 id="instantiating">Instantiating A ScrollView</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    79
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    80
<p><code>ScrollView</code> extends the <code>Widget</code> class, and hence follows the same pattern as any widget constructor, accepting a configuration object to set the initial configuration for the widget.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    81
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    82
<h4 id="instantiating-from-markup-progressive-enhancement">Instantiating From Markup: Progressive Enhancement</h4>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    83
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    84
<p>A ScrollView widget is instantiated from markup by specifying the <code>srcNode</code> which contains the content to be scrolled. The content is usually in the form of a list, but doesn't necessarily have to be:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    85
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    86
<pre class="code prettyprint">&lt;div id=&quot;scrollable&quot; class=&quot;yui3-scrollview-loading&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    87
    &lt;ul&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    88
        &lt;li&gt;AC&#x2F;DC&lt;&#x2F;li&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    89
        &lt;li&gt;Aerosmith&lt;&#x2F;li&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    90
        &lt;li&gt;Bob Dylan&lt;&#x2F;li&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    91
        &lt;li&gt;Bob Seger&lt;&#x2F;li&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    92
        ...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    93
    &lt;&#x2F;ul&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    94
&lt;&#x2F;div&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    95
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    96
<p>The <code>yui3-scrollview-loading</code> class is applied by the developer to progressively enhanced markup, and can be used along with the <code>yui3-js-enabled</code> class applied to the document element, to hide the scrollview markup from view, while the JS is being loaded. The examples show how to set up a <code>yui3-scrollview-loading</code> rule to hide progressively enhanced content.</p>  
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    97
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    98
<p>When instantiating from markup, a reference to the <code>srcNode</code> is provided to the constructor as part of the configuration object. This reference can be a node reference, or a selector string which can be used to identify the node. If the selector string is too broad (returns multiple nodes), the first node found will be used.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    99
The following code references the markup shown above, while constructing the scrollview:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   100
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   101
<pre class="code prettyprint">YUI({...}).use(&quot;scrollview&quot;, function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   102
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   103
    var scrollview = new Y.ScrollView({
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   104
        srcNode:&quot;#scrollable&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   105
        height:&quot;20em&quot;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   106
    });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   107
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   108
});</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   109
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   110
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   111
<p>Generally, a ScrollView widget will be scrollable either horizontally (along the X axis) or vertically (along the Y axis). The ScrollView determines which direction it can scroll in based on whether or not its content is taller (vertically scrolled) or wider (horizontally scrolled) than its height or width respectively, as you would expect
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   112
from native overflow handling. In the above example the widget is given a fixed height, so that it will scroll vertically, when the content gets larger than the specified height. In most use cases you will provide either a height or a width to the ScrollView widget constructor.</p>  
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   113
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   114
<p>Following instantiation, a call to <code>render</code> is required to have the ScrollView's state reflected in the DOM, as with all YUI 3 widgets:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   115
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   116
<pre class="code prettyprint">var scrollview = new Y.ScrollView({ ... });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   117
scrollview.render();</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   118
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   119
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   120
<h3 id="attributes">Attributes</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   121
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   122
<p>ScrollView provides the following core attributes, in addition to the attributes provided by the base <a href="../widget/index.html#attributes">Widget</a> class:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   123
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   124
<table>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   125
    <tr><th>Attribute</th><th>Description</th></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   126
    <tr><td><code>scrollX</code></td><td>The number of pixels to scroll the widget's content by, along the X axis (vertically).</td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   127
    <tr><td><code>scrollY</code></td><td>The number of pixels to scroll the widget's content by, along the Y axis (horizontally).</td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   128
</table>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   129
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   130
<p>Additionally, the following attributes control the sensitivity and scroll dynamics, per instance:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   131
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   132
<table>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   133
    <tr><th>Attribute</th><th>Description</th><th>Default</th></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   134
    <tr><td><code>axis</code></td><td>A string which specifies the axis (or axes) should be scrolled on. Valid values are <code>x</code>, <code>y</code>, or <code>xy</code>.  This is an optional attribute, so if unspecified, ScrollView will attempt to determine the desired scroll axis based off the overflow of content.</td><td><code>auto calculation</code></td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   135
    <tr><td><code>bounce</code></td><td>A drag coefficient, which defines how quickly the velocity of the scrollview content decreases after a flick, when it's past the min and max bounds for the widget. Can be set to 0 to disable bounce behavior.</td><td><code>0.1</code></td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   136
    <tr><td><code>bounceRange</code></td><td>The default bounce distance in pixels.</td><td><code>150</code></td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   137
    <tr><td><code>deceleration</code></td><td>A drag coefficient, which defines how quickly the velocity of the scrollview content decreases after a flick, when it's still with in the min and max bounds for the widget. The closer this is to 1, the less friction there is after a flick.</td><td><code>0.98</code></td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   138
    <tr><td><code>easing</code></td><td>The default easing used when scrolling to a given X or Y.</td><td><code>cubic-bezier(0, 0.1, 0, 1.0)</code></td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   139
    <tr><td><code>flick</code></td><td>An object which specifies the minimum distance and minimum velocity (in pixels/ms - generally around 0.5) which should constitute a flick gesture. Can be set to false to disable flick support, in which case the ScrollView content can only be dragged to scroll it.</td><td><code>{minDistance:10, minVelocity:0.3}</code></td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   140
    <tr><td><code>frameDuration</code></td><td>The default time interval used when animating the flick deceleration.</td><td><code>30</code></td></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   141
    <tr><td><code>snapDuration</code></td><td>The default duration (in ms) used for the snap back animation when scrolled past the min or max bounds for the widget.</td><td><code>ease-out</code></td></tr> 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   142
    <tr><td><code>snapEasing</code></td><td>The default easing used for the snap back animation when scrolled past the min or max bounds for the widget.</td><td><code>ease-out</code></td></tr> 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   143
</table>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   144
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   145
<h3 id="markup">Markup Structure</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   146
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   147
<p>The final rendered ScrollView has the markup structure shown below (shown for a vertical scrollview):</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   148
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   149
<pre class="code prettyprint">&lt;!-- Bounding Box, with overflow setting and fixed dimension (in this case height) --&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   150
&lt;div class=&quot;yui3-widget yui3-scrollview yui3-scrollview-vert&quot; style=&quot;height: 310px;&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   151
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   152
    &lt;!-- Content Box, which is scrolled using either top&#x2F;left, or transform:translate, where supported --&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   153
    &lt;div class=&quot;yui3-scrollview-content&quot; id=&quot;scrollable&quot; style=&quot;left: 0px; top: 0px;&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   154
        ... scrollable content. generally a list ...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   155
    &lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   156
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   157
    &lt;!-- Scrollbar indicator, if Scrollbar Plugin is added (added by default for the &quot;scrollview&quot; module) --&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   158
    &lt;div class=&quot;yui3-scrollview-scrollbar yui3-scrollview-scrollbar-vert&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   159
        &lt;span class=&quot;yui3-scrollview-child yui3-scrollview-first&quot;&gt;&lt;&#x2F;span&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   160
        &lt;span class=&quot;yui3-scrollview-child yui3-scrollview-middle&quot;&gt;&lt;&#x2F;span&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   161
        &lt;span class=&quot;yui3-scrollview-child yui3-scrollview-last&quot;&gt;&lt;&#x2F;span&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   162
    &lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   163
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   164
&lt;&#x2F;div&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   165
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   166
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   167
<p>The <code>yui3-scrollview-vert</code>, or <code>yui3-scrollview-horiz</code> classes applied to the bounding box can be used to style the scrollview based on its scroll orientation.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   168
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   169
<h3 id="css">CSS</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   170
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   171
<p>The core structural css for the ScrollView is shown below, and is pretty straightforward. It simply sets up the bounding box and the content box as positioned elements, and sets overflow hidden, so that the 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   172
content beyond the bounding box area is hidden, until scrolled into view.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   173
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   174
<pre class="code prettyprint">&#x2F;* Bounding Box *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   175
.yui3-scrollview {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   176
    position: relative; &#x2F;* To provide positioning context *&#x2F; 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   177
    overflow: hidden;   &#x2F;* To clip scrolled content *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   178
    ...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   179
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   180
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   181
&#x2F;* Content Box *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   182
.yui3-scrollview-content {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   183
    position:relative; &#x2F;* To allow positioning *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   184
}</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   185
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   186
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   187
<p>Since the scrollable content is commonly set up as a list (for semantic reasons), the core css for ScrollView also ships with a rule targeting list items (<code>LI</code>s), so that list content works out of the box, for both vertical and horizontal scrollviews (inline-block is used so that we can trivially support the horizontal use case):</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   188
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   189
<pre class="code prettyprint">.yui3-scrollview-content ul {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   190
    margin:0;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   191
    padding:0;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   192
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   193
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   194
.yui3-scrollview-content li {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   195
    padding:0;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   196
    margin:0;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   197
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   198
    list-style:none;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   199
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   200
    &#x2F;* cross browser inline block *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   201
    display: -moz-inline-stack;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   202
    display: inline-block;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   203
    *display: inline;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   204
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   205
    ...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   206
}</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   207
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   208
<p>The above rules can of course be over-ridden for cases in which you don't want lists inside ScrollView handled specially.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   209
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   210
<h3 id="scrollbars">ScrollBar Plugin</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   211
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   212
<p>The ScrollBar plugin provides a visual scroll indicator to let the user know how much scrollable content there is, and the current scroll position they're at.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   213
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   214
<p>When using the <code>scrollview</code> module, the <code>ScrollViewScrollbars</code> plugin is automatically pulled down and plugged in for all ScrollView instances (plugged in at the class level).</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   215
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   216
<p>However, the user can also choose to pull down just the base scrollview module (<code>scrollview-base</code>) and add scrollbar support optionally (when and if required).</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   217
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   218
<pre class="code prettyprint">YUI({...}).use(&quot;scrollview-base&quot;, &quot;scrollview-scrollbars&quot;, function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   219
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   220
    &#x2F;* ScrollView without scrollbar indicator *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   221
    var scrollview = new Y.ScrollView({
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   222
        srcNode:&quot;#scrollable&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   223
        height:&quot;20em&quot;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   224
    });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   225
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   226
    &#x2F;* Add scrollbar indicator support *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   227
    scrollview.plug(Y.Plugin.ScrollViewScrollbars);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   228
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   229
    &#x2F;* 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   230
      scrollview.scrollbars is an instance of the ScrollViewScrollbars 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   231
      plugin 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   232
    *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   233
    scrollview.scrollbars.hide();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   234
    scrollview.scrollbars.show(); 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   235
    scrollview.scrollbars.flash();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   236
});</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   237
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   238
<p>When the <code>ScrollViewScrollbars</code> plugin is plugged in to a ScrollView instance, a <code>scrollbars</code> property (the namespace for the plugin) is added to the ScrollView instance, which points to an instance of the plugin, as shown above. The plugin provides public <code>hide()</code>, <code>show()</code> and <code>flash()</code> methods for the scroll indicator.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   239
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   240
<h3 id="paginator">Paginator Plugin</h3>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   241
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   242
<p>The <code>ScrollViewPaginator</code> plugin adds pagination support to ScrollView, so that it recognizes, and stops at, discrete page boundaries within its content, as opposed to scrolling continuously (it effectively makes ScrollView behave like a simple Carousel).</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   243
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   244
<p>Adding the <code>scrollview-paginator</code> module to the <code>use</code> statement will pull down and add the <code>Plugin.ScrollViewPaginator</code> plugin class to the YUI instance. It can then be plugged in to ScrollView instances requiring pagination support, as shown below:</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   245
<pre class="code prettyprint">YUI({...}).use(&quot;scrollview-base&quot;, &quot;scrollview-paginator&quot;, function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   246
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   247
    &#x2F;* ScrollView without paginator *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   248
    var scrollview = new Y.ScrollView({
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   249
        srcNode:&quot;#scrollable&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   250
        height:&quot;20em&quot;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   251
    });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   252
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   253
    &#x2F;* Plug in pagination support *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   254
    scrollview.plug(Y.Plugin.ScrollViewPaginator, {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   255
        selector: &quot;li&quot; &#x2F;&#x2F; elements definining page boundaries
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   256
    });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   257
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   258
    &#x2F;* 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   259
       scrollview.pages is an instance of the ScrollViewPaginator 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   260
       plugin 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   261
    *&#x2F;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   262
    scrollview.pages.set(&quot;index&quot;, 3);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   263
    scrollview.pages.scrollTo(3, 0.6, &quot;ease-in&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   264
    scrollview.pages.next();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   265
    scrollview.pages.get(&quot;total&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   266
});</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   267
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   268
<p>The paginator plugin accepts a <code>selector</code> attribute as part of its configuration, which selects the list of elements to be used to establish page boundaries. In the example above, each <code>LI</code> within the ScrollView's content box, defines a <em>page</em> in the ScrollView.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   269
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   270
<p>When plugged in, the plugin API is available on the <code>pages</code> property of the scrollview widget instance, and can be used to set the current page, or retrieve paging information.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   271
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   272
            </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   273
        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   274
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   275
        <div class="yui3-u-1-4">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   276
            <div class="sidebar">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   277
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   278
                    <div id="toc" class="sidebox">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   279
                        <div class="hd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   280
                            <h2 class="no-toc">Table of Contents</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   281
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   282
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   283
                        <div class="bd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   284
                            <ul class="toc">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   285
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   286
<a href="#getting-started">Getting Started</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   287
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   288
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   289
<a href="#using">Using ScrollView</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   290
<ul class="toc">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   291
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   292
<a href="#instantiating">Instantiating A ScrollView</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   293
<ul class="toc">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   294
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   295
<a href="#instantiating-from-markup-progressive-enhancement">Instantiating From Markup: Progressive Enhancement</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   296
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   297
</ul>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   298
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   299
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   300
<a href="#attributes">Attributes</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   301
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   302
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   303
<a href="#markup">Markup Structure</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   304
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   305
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   306
<a href="#css">CSS</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   307
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   308
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   309
<a href="#scrollbars">ScrollBar Plugin</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   310
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   311
<li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   312
<a href="#paginator">Paginator Plugin</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   313
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   314
</ul>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   315
</li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   316
</ul>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   317
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   318
                    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   319
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   320
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   321
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   322
                    <div class="sidebox">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   323
                        <div class="hd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   324
                            <h2 class="no-toc">Examples</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   325
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   326
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   327
                        <div class="bd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   328
                            <ul class="examples">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   329
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   330
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   331
                                        <li data-description="This example creates a basic ScrollView which doesn&#x27;t include a scrollbar indicator.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   332
                                            <a href="scrollview-base.html">Basic ScrollView Without a Scroll Indicator</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   333
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   334
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   335
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   336
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   337
                                        <li data-description="This example shows the classic Scrollview implementation, including scroll indicators (bars) and including code to suppress link navigation while scrolling.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   338
                                            <a href="scrollview-scroll.html">ScrollView with Scroll Indicator and Link Suppression Behavior</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   339
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   340
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   341
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   342
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   343
                                        <li data-description="This example creates a horizontal ScrollView.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   344
                                            <a href="scrollview-horiz.html">Horizontal ScrollView</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   345
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   346
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   347
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   348
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   349
                                        <li data-description="This example creates a horizontal ScrollView with pagination support.">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   350
                                            <a href="scrollview-paging.html">ScrollView With Pagination</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   351
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   352
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   353
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   354
                            </ul>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   355
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   356
                    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   357
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   358
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   359
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   360
            </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   361
        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   362
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   363
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   364
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   365
<script src="../assets/vendor/prettify/prettify-min.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   366
<script>prettyPrint();</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   367
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   368
<script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   369
YUI.Env.Tests = {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   370
    examples: [],
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   371
    project: '../assets',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   372
    assets: '../assets/scrollview',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   373
    name: 'scrollview',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   374
    title: 'ScrollView',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   375
    newWindow: '',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   376
    auto:  false 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   377
};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   378
YUI.Env.Tests.examples.push('scrollview-base');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   379
YUI.Env.Tests.examples.push('scrollview-scroll');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   380
YUI.Env.Tests.examples.push('scrollview-horiz');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   381
YUI.Env.Tests.examples.push('scrollview-paging');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   382
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   383
</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   384
<script src="../assets/yui/test-runner.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   385
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   386
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   387
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   388
</body>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   389
</html>