|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: ScrollView with Scroll Indicator and Link Suppression Behavior</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 Scroll Indicator and Link Suppression Behavior</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 a scrollbar indicator. It also illustrates a technique for suppressing link behavior during a scroll — a technique you may require if you have a ScrollView instance heavily populated by links, as in this example.</p> |
|
30 </div> |
|
31 |
|
32 <div class="example newwindow"> |
|
33 <a href="scrollview-example.html" target="_blank" class="button"> |
|
34 View Example in New Window |
|
35 </a> |
|
36 </div> |
|
37 |
|
38 <h2>The ScrollView Widget With A Scroll Indicator</h2> |
|
39 |
|
40 <p>In this example, we'll create a ScrollView instance, which also has a scrollbar indicator.</p> |
|
41 |
|
42 <h3>Modules Used</h3> |
|
43 |
|
44 <p>Since we want to use the base ScrollView, along with the ScrollViewScrollbars plugin, which provides the scrollbar indicator we use the <code>scrollview</code> module, instead of the <code>scrollview-base</code> module we used for the basic ScrollView example:</p> |
|
45 |
|
46 <pre class="code prettyprint">// Pulls in scrollview-base and scrollview-scrollbars plugin |
|
47 // and plugs it in (at the class level) |
|
48 |
|
49 YUI().use('scrollview', function(Y) { |
|
50 ... |
|
51 });</pre> |
|
52 |
|
53 |
|
54 <p>The <code>scrollview</code> module pulls in the basic ScrollView and also the ScrollViewScrollbars plugin. It has code which plugs the scrollbar plugin into the ScrollView base class:</p> |
|
55 |
|
56 <pre class="code prettyprint">Y.Base.plug(Y.ScrollView, Y.Plugin.ScrollViewScrollbars);</pre> |
|
57 |
|
58 |
|
59 <h3>Instantiating The ScrollView Widget</h3> |
|
60 |
|
61 <p> |
|
62 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
63 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
64 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
65 </p> |
|
66 <pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
67 |
|
68 |
|
69 <p>As with the <a href="scrollview-base.html">Base ScrollView</a> example, we provide the markup for the ScrollView content on the page, as shown below:</p> |
|
70 |
|
71 <pre class="code prettyprint"><div id="scrollview-content" class="yui3-scrollview-loading"> |
|
72 <ul> |
|
73 <li>AC/DC</li> |
|
74 <li>Aerosmith</li> |
|
75 <li>Billy Joel</li> |
|
76 <li>Bob Dylan</li> |
|
77 ... |
|
78 </ul> |
|
79 </div></pre> |
|
80 |
|
81 |
|
82 <p>And we instantiate the ScrollView instance in the same way, providing the <code>srcNode</code> attribute during construction, so it uses the markup above for it's content:</p> |
|
83 |
|
84 <pre class="code prettyprint">YUI().use('scrollview', function(Y) { |
|
85 |
|
86 var scrollView = new Y.ScrollView({ |
|
87 id: "scrollview", |
|
88 srcNode: '#scrollview-content', |
|
89 height: 310, |
|
90 flick: { |
|
91 minDistance:10, |
|
92 minVelocity:0.3, |
|
93 axis: "y" |
|
94 } |
|
95 }); |
|
96 |
|
97 scrollView.render(); |
|
98 });</pre> |
|
99 |
|
100 |
|
101 <p>Again, for this example, since we want a vertically scrolling ScrollView widget, we also give it a height during construction and constrain flicks to the "y" axis.</p> |
|
102 |
|
103 <p>As the last step, to see the functional ScrollView on the page, we call <code>scrollView.render()</code>.</p> |
|
104 |
|
105 <p>The only difference, compared to the <a href="scrollview-base.html">Base ScrollView</a> example, is that the ScrollViewScrollbars plugin has been pulled down and plugged in by the <code>scrollview</code> module code shown above, so the ScrollView now has a scroll indicator. The scroll indicator is styled with rounded corners in browsers which support CSS rounded corners natively.</p> |
|
106 |
|
107 <h3>Accessing The Scrollbars Plugin API</h3> |
|
108 |
|
109 <p>As discussed in the <a href="index.html#scrollbars">ScrollBar Plugin</a> documentation, the API to control scrollbars is available on the scrollview instance, through the <code>scrollView.scrollbars</code> property. The ScrollBar plugin doesn't have too complex of an api, just a few methods to hide and show the scrollbars:</p> |
|
110 |
|
111 <pre class="code prettyprint">/* |
|
112 scrollView.scrollbars is an instance of the ScrollViewScrollbars plugin |
|
113 */ |
|
114 scrollView.scrollbars.hide(); |
|
115 scrollView.scrollbars.show(); |
|
116 scrollView.scrollbars.flash(); |
|
117 });</pre> |
|
118 |
|
119 |
|
120 <h3>Suppressing Default Link Behavior</h3> |
|
121 |
|
122 <p>In this example, the scrolling surface is populated with links. To prevent links' default action (page navigation) from taking place after a scroll, we look at the <code>lastScrolledAmt</code> property of our ScrollView instance; on a simple click, that number will be very close to zero, whereas after scroll that number will be much higher. In this case, we're using a 2px threshold.</p> |
|
123 |
|
124 <pre class="code prettyprint">var content = scrollView.get("contentBox"); |
|
125 |
|
126 content.delegate("click", function(e) { |
|
127 // Prevent links from navigating as part of a scroll gesture |
|
128 if (Math.abs(scrollView.lastScrolledAmt) > 2) { |
|
129 e.preventDefault(); |
|
130 Y.log("Link behavior suppressed.") |
|
131 } |
|
132 }, "a");</pre> |
|
133 |
|
134 |
|
135 <p>We also prevent default on mousedown, to prevent the native "drag link to desktop" behavior on certain browsers.</p> |
|
136 |
|
137 <pre class="code prettyprint">content.delegate("mousedown", function(e) { |
|
138 // Prevent default anchor drag behavior, on browsers |
|
139 // which let you drag anchors to the desktop |
|
140 e.preventDefault(); |
|
141 }, "a");</pre> |
|
142 |
|
143 |
|
144 <h2>Complete Example Source</h2> |
|
145 |
|
146 <p> |
|
147 <strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
148 page's <code><body></code> element or to a parent element of the widget in order to apply |
|
149 the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
150 </p> |
|
151 <pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
152 |
|
153 |
|
154 <pre class="code prettyprint"><div id="scrollview-container"> |
|
155 <div id="scrollview-header"> |
|
156 <h1>ScrollView</h1> |
|
157 </div> |
|
158 <div id="scrollview-content" class="yui3-scrollview-loading"> |
|
159 <ul> |
|
160 <li><a href="http://www.acdc.com/" title="AC/DC | The Official AC/DC Site">AC/DC</a></li> |
|
161 <li><a href="http://www.aerosmith.com/" title="Aerosmith | Aerosmith -">Aerosmith</a></li> |
|
162 <li><a href="http://www.billyjoel.com/" title="Billy Joel | The Official Billy Joel Site">Billy Joel</a></li> |
|
163 <li><a href="http://www.bobdylan.com/" title="Home Page | Bob Dylan">Bob Dylan</a></li> |
|
164 <li><a href="http://www.bobseger.com/" title="Bob Seger | Official Site | Home">Bob Seger</a></li> |
|
165 <li><a href="http://www.bonjovi.com/" title="Bon Jovi &#134; The Official Website">Bon Jovi</a></li> |
|
166 <li><a href="http://www.brucespringsteen.net/" title="BRUCE SPRINGSTEEN IS AWESOME">Bruce Springsteen</a></li> |
|
167 <li><a href="http://www.creed.com/" title="Creed.com – The Official Website of Creed">Creed</a></li> |
|
168 <li><a href="http://en.wikipedia.org/wiki/Creedence_Clearwater_Revival" title="Creedence Clearwater Revival - Wikipedia, the free encyclopedia">Creedence Clearwater Revival</a></li> |
|
169 <li><a href="http://www.davematthewsband.com/" title="DAVE MATTHEWS BAND | Home Page | Dave Matthews Band">Dave Matthews Band</a></li> |
|
170 <li><a href="http://www.defleppard.com/news/" title="DefLeppard.com | the official Def Leppard web site">Def Leppard</a></li> |
|
171 <li><a href="http://www.eaglesband.com/" title="Eagles | eaglesband.com">The Eagles</a></li> |
|
172 <li><a href="http://www.bunnymen.com/" title="Echo &amp; The Bunnymen">Echo and the Bunnymen</a></li> |
|
173 <li><a href="http://www.eminem.com/" title="Eminem : Official Site">Eminem</a></li> |
|
174 <li><a href="http://www.fleetwoodmac.com/" title="Fleetwood Mac">Fleetwood Mac</a></li> |
|
175 <li>Green Day</li> |
|
176 <li><a href="http://www.gunsnroses.com/" title="Guns N' Roses: Home: Chinese Democracy">Guns N' Roses</a></li> |
|
177 <li><a href="http://www.jamestaylor.com/" title="James Taylor: The Official Site">James Taylor</a></li> |
|
178 <li><a href="http://www.jay-z.com/index.php" title="Jay-Z.com: The Official Jay-Z Website">Jay-Z</a></li> |
|
179 <li><a href="http://en.wikipedia.org/wiki/Jimi_Hendrix" title="Jimi Hendrix - Wikipedia, the free encyclopedia">Jimi Hendrix</a></li> |
|
180 <li><a href="http://www.ledzeppelin.com/" title="Led Zeppelin - Official Website">Led Zeppelin</a></li> |
|
181 <li><a href="http://www.lynyrdskynyrd.com/" title="Lynyrd Skynyrd">Lynyrd Skynyrd</a></li> |
|
182 <li><a href="http://metallica.com/" title="Metallica.com">Metallica</a></li> |
|
183 <li>Motley Crue</li> |
|
184 <li><a href="http://www.neildiamond.com/" title="Official site from Neil Diamond">Neil Diamond</a></li> |
|
185 <li><a href="http://en.wikipedia.org/wiki/Nirvana_(band)" title="Nirvana (band) - Wikipedia, the free encyclopedia">Nirvana</a></li> |
|
186 <li><a href="http://www.ozzy.com/" title="Ozzy Osbourne | The Official Ozzy Osbourne Site">Ozzy Osbourne</a></li> |
|
187 <li><a href="http://pearljam.com/" title="Home | Pearl Jam - Ten Club">Pearl Jam</a></li> |
|
188 <li><a href="http://www.pinkfloyd.com/" title="Pink Floyd | The Official Site">Pink Floyd</a></li> |
|
189 <li><a href="http://www.queenonline.com/" title="Queen Online.com">Queen</a></li> |
|
190 <li><a href="http://www.rodstewart.com/" title="Rod Stewart | The Official Rod Stewart Site">Rod Stewart</a></li> |
|
191 <li><a href="http://www.rush.com/" title="RUSH - Official Website">Rush</a></li> |
|
192 <li><a href="http://www.santana.com/" title="SANTANA - The Official Carlos Santana Web Site">Santana</a></li> |
|
193 <li><a href="http://www.simonandgarfunkel.com/" title="Simon &amp; Garfunkel official site">Simon and Garfunkel</a></li> |
|
194 <li><a href="http://www.stevemillerband.com/" title="Steve Miller Band - Official Web Site">Steve Miller Band</a></li> |
|
195 <li><a href="http://www.thebeatles.com/" title="The Beatles">The Beatles</a></li> |
|
196 <li><a href="http://www.thedoors.com/" title="The Doors">The Doors</a></li> |
|
197 <li><a href="http://www.thepolicefile.com/" title="ThePoliceFile.com: The Police - Concert Tickets - World Tour - The Police">The Police</a></li> |
|
198 <li><a href="http://www.rollingstones.com/" title="The Official site of the Rolling Stones | Rollingstones.com">The Rolling Stones</a></li> |
|
199 <li><a href="http://www.tompetty.com/" title="TomPetty.com &gt; Home">Tom Petty</a></li> |
|
200 <li><a href="http://www.u2.com/" title="U2 &gt; Welcome">U2</a></li> |
|
201 <li><a href="http://www.van-halen.com/" title="Van-Halen.com | the official Van Halen web site">Van Halen</a></li> |
|
202 <li><a href="http://www.willienelson.com/" title="Home &raquo; |
|
203 Willie Nelson">Willie Nelson</a></li> |
|
204 <li><a href="http://www.zztop.com/" title="ZZ Top | Home">ZZ Top</a></li> |
|
205 </ul> |
|
206 </div> |
|
207 </div> |
|
208 |
|
209 <div id="additional-content"> |
|
210 <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> |
|
211 <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> |
|
212 </div> |
|
213 |
|
214 <script type="text/javascript" charset="utf-8"> |
|
215 YUI().use('scrollview', function(Y) { |
|
216 |
|
217 var scrollView = new Y.ScrollView({ |
|
218 id: "scrollview", |
|
219 srcNode: '#scrollview-content', |
|
220 height: 310, |
|
221 flick: { |
|
222 minDistance:10, |
|
223 minVelocity:0.3, |
|
224 axis: "y" |
|
225 } |
|
226 }); |
|
227 |
|
228 scrollView.render(); |
|
229 |
|
230 var content = scrollView.get("contentBox"); |
|
231 |
|
232 content.delegate("click", function(e) { |
|
233 // Prevent links from navigating as part of a scroll gesture |
|
234 if (Math.abs(scrollView.lastScrolledAmt) > 2) { |
|
235 e.preventDefault(); |
|
236 Y.log("Link behavior suppressed.") |
|
237 } |
|
238 }, "a"); |
|
239 |
|
240 content.delegate("mousedown", function(e) { |
|
241 // Prevent default anchor drag behavior, on browsers which let you drag anchors to the desktop |
|
242 e.preventDefault(); |
|
243 }, "a"); |
|
244 }); |
|
245 |
|
246 </script></pre> |
|
247 |
|
248 </div> |
|
249 </div> |
|
250 </div> |
|
251 |
|
252 <div class="yui3-u-1-4"> |
|
253 <div class="sidebar"> |
|
254 |
|
255 |
|
256 |
|
257 <div class="sidebox"> |
|
258 <div class="hd"> |
|
259 <h2 class="no-toc">Examples</h2> |
|
260 </div> |
|
261 |
|
262 <div class="bd"> |
|
263 <ul class="examples"> |
|
264 |
|
265 |
|
266 <li data-description="This example creates a basic ScrollView which doesn't include a scrollbar indicator."> |
|
267 <a href="scrollview-base.html">Basic ScrollView Without a Scroll Indicator</a> |
|
268 </li> |
|
269 |
|
270 |
|
271 |
|
272 <li data-description="This example shows the classic Scrollview implementation, including scroll indicators (bars) and including code to suppress link navigation while scrolling."> |
|
273 <a href="scrollview-scroll.html">ScrollView with Scroll Indicator and Link Suppression Behavior</a> |
|
274 </li> |
|
275 |
|
276 |
|
277 |
|
278 <li data-description="This example creates a horizontal ScrollView."> |
|
279 <a href="scrollview-horiz.html">Horizontal ScrollView</a> |
|
280 </li> |
|
281 |
|
282 |
|
283 |
|
284 <li data-description="This example creates a horizontal ScrollView with pagination support."> |
|
285 <a href="scrollview-paging.html">ScrollView With Pagination</a> |
|
286 </li> |
|
287 |
|
288 |
|
289 </ul> |
|
290 </div> |
|
291 </div> |
|
292 |
|
293 |
|
294 |
|
295 </div> |
|
296 </div> |
|
297 </div> |
|
298 </div> |
|
299 |
|
300 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
301 <script>prettyPrint();</script> |
|
302 |
|
303 <script> |
|
304 YUI.Env.Tests = { |
|
305 examples: [], |
|
306 project: '../assets', |
|
307 assets: '../assets/scrollview', |
|
308 name: 'scrollview-scroll', |
|
309 title: 'ScrollView with Scroll Indicator and Link Suppression Behavior', |
|
310 newWindow: 'true', |
|
311 auto: false |
|
312 }; |
|
313 YUI.Env.Tests.examples.push('scrollview-base'); |
|
314 YUI.Env.Tests.examples.push('scrollview-scroll'); |
|
315 YUI.Env.Tests.examples.push('scrollview-horiz'); |
|
316 YUI.Env.Tests.examples.push('scrollview-paging'); |
|
317 |
|
318 </script> |
|
319 <script src="../assets/yui/test-runner.js"></script> |
|
320 |
|
321 |
|
322 |
|
323 </body> |
|
324 </html> |