← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/scrollview/scrollview-horiz.html

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/scrollview/scrollview-horiz.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Horizontal ScrollView</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Horizontal ScrollView</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
    <p>This example shows how to create a ScrollView widget which scrolls horizontally.</p>
22
 
</div>
23
 
 
24
 
<div class="example newwindow">
25
 
    <a href="scrollview-horiz-example.html" target="_blank" class="button">
26
 
        View Example in New Window
27
 
    </a>
28
 
</div>
29
 
 
30
 
<h2>A Horizontal ScrollView</h2>
31
 
 
32
 
<p>In this example, we'll create a ScrollView instance, which scrolls horizontally, as opposed to the vertically scrolling ScrollView we created in the <a href="scrollview.html">ScrollView With Scroll Indicator</a> example.</p>
33
 
 
34
 
<p>The code for the example is pretty much the same as the code for the <a href="scrollview.html">ScrollView With Scroll Indicator</a> example. The only difference is that instead of having a ScrollView with a fixed height (and content which overflows that height), we set up a ScrollView with a fixed width (and content which overflows that width).</p>
35
 
 
36
 
<h3>Modules Used</h3>
37
 
 
38
 
<p>Since we want to use the base ScrollView, along with the ScrollViewScrollbars plugin, we use the <code>scrollview</code> module as we did for the vertical ScrollView example:</p>
39
 
 
40
 
<pre class="code prettyprint">YUI().use(&#x27;scrollview&#x27;, function(Y) {
41
 
    ...
42
 
});</pre>
43
 
 
44
 
 
45
 
<h3>Instantiating The ScrollView Widget</h3>
46
 
 
47
 
<p>As with the vertical <a href="scrollview.html">ScrollView</a> example, we provide the markup for the ScrollView content on the page, as shown below:</p>
48
 
 
49
 
<pre class="code prettyprint">&lt;!-- Content with a width which would require scrolling --&gt;
50
 
&lt;div id=&quot;scrollview-content&quot; class=&quot;yui3-scrollview-loading&quot;&gt;
51
 
    &lt;ul&gt;
52
 
        &lt;li&gt;&lt;img src=&quot;...&quot;&gt;&lt;&#x2F;li&gt;
53
 
        &lt;li&gt;&lt;img src=&quot;...&quot;&gt;&lt;&#x2F;li&gt;
54
 
        &lt;li&gt;&lt;img src=&quot;...&quot;&gt;&lt;&#x2F;li&gt;
55
 
        &lt;li&gt;&lt;img src=&quot;...&quot;&gt;&lt;&#x2F;li&gt;
56
 
    &lt;&#x2F;ul&gt;
57
 
&lt;&#x2F;div&gt;</pre>
58
 
 
59
 
 
60
 
<p>But this time, when we instantiate the ScrollView instance, we provide a fixed width, as opposed to a fixed height, for the widget.</p> 
61
 
 
62
 
<pre class="code prettyprint">&#x2F;&#x2F; Constraining the width, instead of the height for horizontal scrolling
63
 
var scrollView = new Y.ScrollView({
64
 
    id: &#x27;scrollview&#x27;,
65
 
    srcNode: &#x27;#scrollview-content&#x27;,
66
 
    width: 320,
67
 
    flick: {
68
 
        minDistance:10,
69
 
        minVelocity:0.3,
70
 
        axis: &quot;x&quot;
71
 
    }
72
 
});
73
 
 
74
 
scrollView.render();</pre>
75
 
 
76
 
 
77
 
<p>This causes the list content (which has inline-block applied to each LI by the scrollview CSS) to be wider than the ScrollView, forcing horizontal scrolling. The height of the ScrollView in this case is driven by the height of it's content. As with the ScrollView Base example, we constrain flick handling to a specific axis, in this case the "x" axis.</p>
78
 
 
79
 
<p>The important CSS for the example, which switches the LIs to layout horizontally, is shown below, along with some tweaks requires for IE 6 and 7 support:</p>
80
 
 
81
 
<pre class="code prettyprint">&#x2F;* To layout horizontal LIs *&#x2F;
82
 
#scrollview-content {
83
 
    white-space:nowrap;
84
 
}
85
 
 
86
 
#scrollview-content li {
87
 
    display:inline-block;
88
 
    background-color:#fff;
89
 
}
90
 
 
91
 
&#x2F;* For IE 6&#x2F;7 - needs inline block hack (and the background color mentioned above) *&#x2F;
92
 
#scrollview-content li {
93
 
    *display:inline;
94
 
    *zoom:1;
95
 
}</pre>
96
 
 
97
 
 
98
 
<p><strong>NOTE:</strong> In the initial ScrollView release (3.2.0), the above CSS to layout LIs horizontally was bundled with the ScrollView CSS out-of-the-box. It has been removed as of the 3.3.0 release, since it makes it harder for developers to nest lists inside the ScrollView content, and in general, ScrollView is content agnostic.</p>
99
 
 
100
 
<h3>Preventing Native Behavior For Content</h3>
101
 
 
102
 
<p>In this example, since we have images which act as drag/flick targets, we need to stop the default image drag/drop behavior in certain browsers (for example gecko and IE), by preventing default on the underlying mousedown event. If we don't prevent default, the image will be natively draggable by default, and interfere with scrolling:</p>
103
 
 
104
 
<pre class="code prettyprint">&#x2F;&#x2F; Prevent the image from being natively dragged
105
 
content.delegate(&quot;mousedown&quot;, function(e) {
106
 
    e.preventDefault();
107
 
}, &quot;img&quot;);</pre>
108
 
 
109
 
 
110
 
<h2>Complete Example Source</h2>
111
 
<pre class="code prettyprint">&lt;div id=&quot;scrollview-container&quot;&gt;
112
 
    &lt;div id=&quot;scrollview-header&quot;&gt;
113
 
        &lt;h1&gt;Horizontal ScrollView&lt;&#x2F;h1&gt;
114
 
    &lt;&#x2F;div&gt;
115
 
    
116
 
    &lt;div id=&quot;scrollview-content&quot; class=&quot;yui3-scrollview-loading&quot;&gt;
117
 
        &lt;ul&gt;
118
 
            &lt;li&gt;&lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4136&#x2F;4802088086_c621e0b501.jpg&quot; alt=&quot;Above The City II&quot;&gt;&lt;&#x2F;li&gt;
119
 
            &lt;li&gt;&lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4114&#x2F;4801461321_1373a0ef89.jpg&quot; alt=&quot;Walls and Canyon&quot;&gt;&lt;&#x2F;li&gt;
120
 
            &lt;li&gt;&lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4100&#x2F;4801614015_4303e8eaea.jpg&quot; alt=&quot;Stairs Using In Situ Stone&quot;&gt;&lt;&#x2F;li&gt;
121
 
            &lt;li&gt;&lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4076&#x2F;4801368583_854e8c0ef3.jpg&quot; alt=&quot;Tree Silhouette&quot;&gt;&lt;&#x2F;li&gt;
122
 
        &lt;&#x2F;ul&gt;
123
 
    &lt;&#x2F;div&gt;
124
 
&lt;&#x2F;div&gt;
125
 
 
126
 
&lt;div id=&quot;additional-content&quot;&gt;
127
 
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam hendrerit elit id vulputate. Pellentesque pellentesque erat rutrum velit facilisis sodales convallis tellus lacinia. Curabitur gravida mi sit amet nulla suscipit sed congue dolor volutpat. Aenean sem tortor, pretium et euismod in, imperdiet sit amet urna. Ut ante nisi, auctor mattis suscipit a, ullamcorper eget leo. Phasellus sagittis ante at lectus rutrum ut sollicitudin sem malesuada. Duis ultrices sapien et nulla tincidunt malesuada. Mauris ante turpis, dignissim eu tincidunt vitae, placerat quis diam. In augue nisl, cursus at rutrum ut, scelerisque et erat. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris orci dui, aliquam ut convallis ut, dapibus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Mauris placerat elit id lectus rhoncus in dignissim justo mollis. Donec nec odio sapien. In iaculis euismod felis non laoreet. Mauris ornare varius neque, et congue erat porta a. Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.&lt;&#x2F;p&gt;
128
 
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam hendrerit elit id vulputate. Pellentesque pellentesque erat rutrum velit facilisis sodales convallis tellus lacinia. Curabitur gravida mi sit amet nulla suscipit sed congue dolor volutpat. Aenean sem tortor, pretium et euismod in, imperdiet sit amet urna. Ut ante nisi, auctor mattis suscipit a, ullamcorper eget leo. Phasellus sagittis ante at lectus rutrum ut sollicitudin sem malesuada. Duis ultrices sapien et nulla tincidunt malesuada. Mauris ante turpis, dignissim eu tincidunt vitae, placerat quis diam. In augue nisl, cursus at rutrum ut, scelerisque et erat. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris orci dui, aliquam ut convallis ut, dapibus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Mauris placerat elit id lectus rhoncus in dignissim justo mollis. Donec nec odio sapien. In iaculis euismod felis non laoreet. Mauris ornare varius neque, et congue erat porta a. Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.&lt;&#x2F;p&gt;
129
 
&lt;&#x2F;div&gt;
130
 
 
131
 
&lt;script type=&quot;text&#x2F;javascript&quot; charset=&quot;utf-8&quot;&gt;
132
 
YUI().use(&#x27;scrollview&#x27;, function(Y) {
133
 
 
134
 
    var scrollView = new Y.ScrollView({
135
 
        id: &#x27;scrollview&#x27;,
136
 
        srcNode: &#x27;#scrollview-content&#x27;,
137
 
        width: 320,
138
 
        flick: {
139
 
            minDistance:10,
140
 
            minVelocity:0.3,
141
 
            axis: &quot;x&quot;
142
 
        }
143
 
    });
144
 
 
145
 
    scrollView.render();
146
 
 
147
 
    &#x2F;&#x2F; Prevent default image drag behavior
148
 
    scrollView.get(&quot;contentBox&quot;).delegate(&quot;mousedown&quot;, function(e) {
149
 
        e.preventDefault();
150
 
    }, &quot;img&quot;);
151
 
    
152
 
});
153
 
&lt;&#x2F;script&gt;</pre>
154
 
 
155
 
</div>
156
 
        </div>
157
 
 
158
 
        <div id="sidebar" class="yui3-u">
159
 
            
160
 
 
161
 
            
162
 
                <div class="sidebox">
163
 
                    <div class="hd">
164
 
                        <h2 class="no-toc">Examples</h2>
165
 
                    </div>
166
 
 
167
 
                    <div class="bd">
168
 
                        <ul class="examples">
169
 
                            
170
 
                                
171
 
                                    <li data-description="This example creates a basic ScrollView which doesn&#x27;t include a scrollbar indicator.">
172
 
                                        <a href="scrollview-base.html">Basic ScrollView Without a Scroll Indicator</a>
173
 
                                    </li>
174
 
                                
175
 
                            
176
 
                                
177
 
                                    <li data-description="This example shows the classic Scrollview implementation, including scroll indicators (bars) and including code to suppress link navigation while scrolling.">
178
 
                                        <a href="scrollview.html">ScrollView with Scroll Indicator and Link Suppression Behavior</a>
179
 
                                    </li>
180
 
                                
181
 
                            
182
 
                                
183
 
                                    <li data-description="This example creates a horizontal ScrollView.">
184
 
                                        <a href="scrollview-horiz.html">Horizontal ScrollView</a>
185
 
                                    </li>
186
 
                                
187
 
                            
188
 
                                
189
 
                                    <li data-description="This example creates a horizontal ScrollView with pagination support.">
190
 
                                        <a href="scrollview-paging.html">ScrollView With Pagination</a>
191
 
                                    </li>
192
 
                                
193
 
                            
194
 
                        </ul>
195
 
                    </div>
196
 
                </div>
197
 
            
198
 
 
199
 
            
200
 
        </div>
201
 
    </div>
202
 
</div>
203
 
 
204
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
205
 
<script>prettyPrint();</script>
206
 
 
207
 
</body>
208
 
</html>