|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: ScrollView With Pagination</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
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> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
|
|
|
24 |
<h1>Example: ScrollView With Pagination</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><div class="intro"> |
|
|
29 |
<p>This example shows how to create a ScrollView widget with pagination support, using the ScrollViewPaginator plugin.</p> |
|
|
30 |
</div> |
|
|
31 |
|
|
|
32 |
<div class="example newwindow"> |
|
|
33 |
<a href="scrollview-paging-example.html" target="_blank" class="button"> |
|
|
34 |
View Example in New Window |
|
|
35 |
</a> |
|
|
36 |
</div> |
|
|
37 |
|
|
|
38 |
<h2>ScrollView with Pagination Support</h2> |
|
|
39 |
|
|
|
40 |
<p>In this example, we'll create a ScrollView instance which has pagination support enabled. This allows the ScrollView to scroll between discrete page boundaries in the content, as opposed to continuous scrolling. Pagination is only supported for horizontal ScrollViews currently.</p> |
|
|
41 |
|
|
|
42 |
<h3>Modules Used</h3> |
|
|
43 |
|
|
|
44 |
<p>For this example, since we want both pagination and scrollbar indicator support enabled, we use the <code>scrollview</code> module as we did for the <a href="scrollview-horiz.html">Horizontal ScrollView</a> example to get the base ScrollView with scrollbar support.</p> |
|
|
45 |
|
|
|
46 |
<p>Additionally we pull down the <code>scrollview-paginator</code> module, which provides the <code>ScrollViewPaginator</code> plugin:</p> |
|
|
47 |
|
|
|
48 |
<pre class="code prettyprint">// Pull in the scrollview widget, and the paginator plugin |
|
|
49 |
|
|
|
50 |
YUI().use('scrollview', 'scrollview-paginator', function(Y) { |
|
|
51 |
... |
|
|
52 |
});</pre> |
|
|
53 |
|
|
|
54 |
|
|
|
55 |
<h3>Instantiating The ScrollView Widget</h3> |
|
|
56 |
|
|
|
57 |
<p> |
|
|
58 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
59 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
60 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
61 |
</p> |
|
|
62 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
|
63 |
|
|
|
64 |
|
|
|
65 |
<p>As with the <a href="scrollview-horiz.html">Horizontal ScrollView</a> example, we provide the markup for the ScrollView content on the page, as shown below:</p> |
|
|
66 |
|
|
|
67 |
<pre class="code prettyprint"><!-- Content with a width which would require scrolling --> |
|
|
68 |
<div id="scrollview-content" style="" class="yui3-scrollview-loading"> |
|
|
69 |
<ul> |
|
|
70 |
<li><img src="..."></li> |
|
|
71 |
<li><img src="..."></li> |
|
|
72 |
<li><img src="..."></li> |
|
|
73 |
<li><img src="..."></li> |
|
|
74 |
</ul> |
|
|
75 |
</div></pre> |
|
|
76 |
|
|
|
77 |
|
|
|
78 |
<p>And we instantiate the ScrollView instance in the same way, by providing a fixed width for the widget, and constraining flicks to the "x" axis:</p> |
|
|
79 |
|
|
|
80 |
<pre class="code prettyprint">// Constraining the width, instead of the height for horizontal scrolling |
|
|
81 |
var scrollView = new Y.ScrollView({ |
|
|
82 |
id: '#scrollview', |
|
|
83 |
srcNode: '#scrollview-content', |
|
|
84 |
width : 320, |
|
|
85 |
flick: { |
|
|
86 |
minDistance:10, |
|
|
87 |
minVelocity:0.3, |
|
|
88 |
axis: "x" |
|
|
89 |
} |
|
|
90 |
});</pre> |
|
|
91 |
|
|
|
92 |
|
|
|
93 |
<p>As we did in the Horizontal ScrollView example, we add CSS which switches the LIs to layout horizontally:</p> |
|
|
94 |
|
|
|
95 |
<pre class="code prettyprint">/* To layout horizontal LIs */ |
|
|
96 |
#scrollview-content { |
|
|
97 |
white-space:nowrap; |
|
|
98 |
} |
|
|
99 |
|
|
|
100 |
#scrollview-content li { |
|
|
101 |
display:inline-block; |
|
|
102 |
background-color:#fff; |
|
|
103 |
} |
|
|
104 |
|
|
|
105 |
/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */ |
|
|
106 |
#scrollview-content li { |
|
|
107 |
*display:inline; |
|
|
108 |
*zoom:1; |
|
|
109 |
}</pre> |
|
|
110 |
|
|
|
111 |
|
|
|
112 |
<p>This gives us a ScrollView instance with scrollbar indicator support. However it doesn't have pagination support available yet.</p> |
|
|
113 |
|
|
|
114 |
<h3>Plugging In Pagination Support</h3> |
|
|
115 |
|
|
|
116 |
<p>To add pagination support to the ScrollView instance, we plug in the <code>ScrollViewPaginator</code> plugin, providing the <code>selector</code> attribute configuration argument to it. The <code>selector</code> tells |
|
|
117 |
the paginator which list of elements inside the ScrollView content box define page boundaries at which the ScrollView should stop when scrolling. For this example, each LI defines a ScrollView page:</p> |
|
|
118 |
|
|
|
119 |
<pre class="code prettyprint">scrollView.plug(Y.Plugin.ScrollViewPaginator, { |
|
|
120 |
selector: 'li' |
|
|
121 |
});</pre> |
|
|
122 |
|
|
|
123 |
|
|
|
124 |
<p>The ScrollView now has pagination support activated, and will stop at page boundaries when the user flicks the content, or drags the content past the halfway point of the current page.</p> |
|
|
125 |
|
|
|
126 |
<h3>Accessing The Paginator Plugin API</h3> |
|
|
127 |
|
|
|
128 |
<p>Similar to the ScrollBar indicator plugin, the ScrollBarPaginator API is now available on the ScrollView instance, on the namespace defined by the plugin, which is <code>scrollView.pages</code>. |
|
|
129 |
The <code>pages</code> property can be used to manage the page state of the ScrollView, as shown below:</p> |
|
|
130 |
|
|
|
131 |
<pre class="code prettyprint">Y.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages)); |
|
|
132 |
Y.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));</pre> |
|
|
133 |
|
|
|
134 |
|
|
|
135 |
<p>The above code calls the plugin's <code>next()</code> and <code>prev()</code> methods when the respective button is clicked. The <a href="index.html#paginator">ScrollView Paginator</a> documentation provides additional examples of the API available through the <code>pages</code> property.</p> |
|
|
136 |
|
|
|
137 |
<h3>Setting Up A Click Listener On the Content</h3> |
|
|
138 |
|
|
|
139 |
<p>For this example, we also set up a click listener on the images. For touch devices, the click event does not fire when dragging or flicking, so there's no special handling required when setting up a click listener. However to also support mouse based devices, we need to distinguish between a click and drag or flick. In order to do this we set up a check in our click listener, to make sure we only respond to the click if the ScrollView wasn't dragged, by checking the <code>lastScrolledAmt</code> property, which is reset whenever a drag/flick gesture ends:</p> |
|
|
140 |
|
|
|
141 |
<pre class="code prettyprint">Y.one("#scrollview-content").delegate("click", function(e) { |
|
|
142 |
// For mouse based devices, we need to make sure the click isn't fired |
|
|
143 |
// and the end of a drag/scroll. We use 2 as an arbitrary threshold. |
|
|
144 |
if (Math.abs(scrollView.lastScrolledAmt) < 2) { |
|
|
145 |
alert(e.currentTarget.getAttribute("alt")); |
|
|
146 |
} |
|
|
147 |
}, "img");</pre> |
|
|
148 |
|
|
|
149 |
|
|
|
150 |
<h3>Preventing Native Behavior For Content</h3> |
|
|
151 |
|
|
|
152 |
<p>As with the Horizontal ScrollView 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> |
|
|
153 |
|
|
|
154 |
<pre class="code prettyprint">// Prevent the image from being natively dragged |
|
|
155 |
content.delegate("mousedown", function(e) { |
|
|
156 |
e.preventDefault(); |
|
|
157 |
}, "img");</pre> |
|
|
158 |
|
|
|
159 |
|
|
|
160 |
<h2>Complete Example Source</h2> |
|
|
161 |
|
|
|
162 |
<p> |
|
|
163 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
164 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
165 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
166 |
</p> |
|
|
167 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
|
168 |
|
|
|
169 |
|
|
|
170 |
<pre class="code prettyprint"><div id="scrollview-container"> |
|
|
171 |
<div id="scrollview-header"> |
|
|
172 |
<h1>Paged ScrollView</h1> |
|
|
173 |
</div> |
|
|
174 |
|
|
|
175 |
<div id="scrollview-content" class="yui3-scrollview-loading"> |
|
|
176 |
<ul> |
|
|
177 |
<li><img src="http://farm5.static.flickr.com/4136/4802088086_c621e0b501.jpg" alt="Above The City II"></li> |
|
|
178 |
<li><img src="http://farm5.static.flickr.com/4114/4801461321_1373a0ef89.jpg" alt="Walls and Canyon"></li> |
|
|
179 |
<li><img src="http://farm5.static.flickr.com/4100/4801614015_4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li> |
|
|
180 |
<li><img src="http://farm5.static.flickr.com/4076/4801368583_854e8c0ef3.jpg" alt="Tree Silhouette"></li> |
|
|
181 |
</ul> |
|
|
182 |
</div> |
|
|
183 |
|
|
|
184 |
<div id="scrollview-pager"> |
|
|
185 |
<button id="scrollview-prev">Prev</button> |
|
|
186 |
<button id="scrollview-next">Next</button> |
|
|
187 |
</div> |
|
|
188 |
</div> |
|
|
189 |
|
|
|
190 |
<div id="additional-content"> |
|
|
191 |
<p>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.</p> |
|
|
192 |
<p>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.</p> |
|
|
193 |
</div> |
|
|
194 |
|
|
|
195 |
<script type="text/javascript" charset="utf-8"> |
|
|
196 |
YUI().use('scrollview', 'scrollview-paginator', function(Y) { |
|
|
197 |
|
|
|
198 |
var scrollView = new Y.ScrollView({ |
|
|
199 |
id: "scrollview", |
|
|
200 |
srcNode : '#scrollview-content', |
|
|
201 |
width : 320, |
|
|
202 |
flick: { |
|
|
203 |
minDistance:10, |
|
|
204 |
minVelocity:0.3, |
|
|
205 |
axis: "x" |
|
|
206 |
} |
|
|
207 |
}); |
|
|
208 |
|
|
|
209 |
scrollView.plug(Y.Plugin.ScrollViewPaginator, { |
|
|
210 |
selector: 'li' |
|
|
211 |
}); |
|
|
212 |
|
|
|
213 |
scrollView.render(); |
|
|
214 |
|
|
|
215 |
var content = scrollView.get("contentBox"); |
|
|
216 |
|
|
|
217 |
content.delegate("click", function(e) { |
|
|
218 |
// For mouse based devices, we need to make sure the click isn't fired |
|
|
219 |
// at the end of a drag/flick. We use 2 as an arbitrary threshold. |
|
|
220 |
if (Math.abs(scrollView.lastScrolledAmt) < 2) { |
|
|
221 |
alert(e.currentTarget.getAttribute("alt")); |
|
|
222 |
} |
|
|
223 |
}, "img"); |
|
|
224 |
|
|
|
225 |
// Prevent default image drag behavior |
|
|
226 |
content.delegate("mousedown", function(e) { |
|
|
227 |
e.preventDefault(); |
|
|
228 |
}, "img"); |
|
|
229 |
|
|
|
230 |
Y.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages)); |
|
|
231 |
Y.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages)); |
|
|
232 |
|
|
|
233 |
}); |
|
|
234 |
</script></pre> |
|
|
235 |
|
|
|
236 |
</div> |
|
|
237 |
</div> |
|
|
238 |
</div> |
|
|
239 |
|
|
|
240 |
<div class="yui3-u-1-4"> |
|
|
241 |
<div class="sidebar"> |
|
|
242 |
|
|
|
243 |
|
|
|
244 |
|
|
|
245 |
<div class="sidebox"> |
|
|
246 |
<div class="hd"> |
|
|
247 |
<h2 class="no-toc">Examples</h2> |
|
|
248 |
</div> |
|
|
249 |
|
|
|
250 |
<div class="bd"> |
|
|
251 |
<ul class="examples"> |
|
|
252 |
|
|
|
253 |
|
|
|
254 |
<li data-description="This example creates a basic ScrollView which doesn't include a scrollbar indicator."> |
|
|
255 |
<a href="scrollview-base.html">Basic ScrollView Without a Scroll Indicator</a> |
|
|
256 |
</li> |
|
|
257 |
|
|
|
258 |
|
|
|
259 |
|
|
|
260 |
<li data-description="This example shows the classic Scrollview implementation, including scroll indicators (bars) and including code to suppress link navigation while scrolling."> |
|
|
261 |
<a href="scrollview-scroll.html">ScrollView with Scroll Indicator and Link Suppression Behavior</a> |
|
|
262 |
</li> |
|
|
263 |
|
|
|
264 |
|
|
|
265 |
|
|
|
266 |
<li data-description="This example creates a horizontal ScrollView."> |
|
|
267 |
<a href="scrollview-horiz.html">Horizontal ScrollView</a> |
|
|
268 |
</li> |
|
|
269 |
|
|
|
270 |
|
|
|
271 |
|
|
|
272 |
<li data-description="This example creates a horizontal ScrollView with pagination support."> |
|
|
273 |
<a href="scrollview-paging.html">ScrollView With Pagination</a> |
|
|
274 |
</li> |
|
|
275 |
|
|
|
276 |
|
|
|
277 |
</ul> |
|
|
278 |
</div> |
|
|
279 |
</div> |
|
|
280 |
|
|
|
281 |
|
|
|
282 |
|
|
|
283 |
</div> |
|
|
284 |
</div> |
|
|
285 |
</div> |
|
|
286 |
</div> |
|
|
287 |
|
|
|
288 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
289 |
<script>prettyPrint();</script> |
|
|
290 |
|
|
|
291 |
<script> |
|
|
292 |
YUI.Env.Tests = { |
|
|
293 |
examples: [], |
|
|
294 |
project: '../assets', |
|
|
295 |
assets: '../assets/scrollview', |
|
|
296 |
name: 'scrollview-paging', |
|
|
297 |
title: 'ScrollView With Pagination', |
|
|
298 |
newWindow: 'true', |
|
|
299 |
auto: false |
|
|
300 |
}; |
|
|
301 |
YUI.Env.Tests.examples.push('scrollview-base'); |
|
|
302 |
YUI.Env.Tests.examples.push('scrollview-scroll'); |
|
|
303 |
YUI.Env.Tests.examples.push('scrollview-horiz'); |
|
|
304 |
YUI.Env.Tests.examples.push('scrollview-paging'); |
|
|
305 |
|
|
|
306 |
</script> |
|
|
307 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
308 |
|
|
|
309 |
|
|
|
310 |
|
|
|
311 |
</body> |
|
|
312 |
</html> |