|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html> |
|
3 <head> |
|
4 <title>ScrollView Example</title> |
|
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
|
6 |
|
7 <style> |
|
8 /* Avoid resource latency for these, since they hide unenhanced content */ |
|
9 .yui3-js-enabled .yui3-scrollview-loading { |
|
10 visibility:hidden; |
|
11 } |
|
12 |
|
13 #additional-content { |
|
14 display:none; |
|
15 } |
|
16 </style> |
|
17 |
|
18 <link rel="stylesheet" href="../../build/cssreset/cssreset-min.css" type="text/css" charset="utf-8"> |
|
19 <link rel="stylesheet" href="../assets/scrollview/vertical.css" type="text/css" charset="utf-8"> |
|
20 <link media="handheld, only screen and (max-device-width: 480px)" href="../assets/scrollview/vertical-smallscreen.css" type="text/css" rel="stylesheet" charset="utf-8"> |
|
21 |
|
22 <script src="../../build/yui/yui-min.js"></script> |
|
23 </head> |
|
24 |
|
25 <body class="yui3-skin-sam"> |
|
26 <div id="scrollview-container"> |
|
27 <div id="scrollview-header"> |
|
28 <h1>ScrollView</h1> |
|
29 </div> |
|
30 <div id="scrollview-content" class="yui3-scrollview-loading"> |
|
31 <ul> |
|
32 <li><a href="http://www.acdc.com/" title="AC/DC | The Official AC/DC Site">AC/DC</a></li> |
|
33 <li><a href="http://www.aerosmith.com/" title="Aerosmith | Aerosmith -">Aerosmith</a></li> |
|
34 <li><a href="http://www.billyjoel.com/" title="Billy Joel | The Official Billy Joel Site">Billy Joel</a></li> |
|
35 <li><a href="http://www.bobdylan.com/" title="Home Page | Bob Dylan">Bob Dylan</a></li> |
|
36 <li><a href="http://www.bobseger.com/" title="Bob Seger | Official Site | Home">Bob Seger</a></li> |
|
37 <li><a href="http://www.bonjovi.com/" title="Bon Jovi † The Official Website">Bon Jovi</a></li> |
|
38 <li><a href="http://www.brucespringsteen.net/" title="BRUCE SPRINGSTEEN IS AWESOME">Bruce Springsteen</a></li> |
|
39 <li><a href="http://www.creed.com/" title="Creed.com – The Official Website of Creed">Creed</a></li> |
|
40 <li><a href="http://en.wikipedia.org/wiki/Creedence_Clearwater_Revival" title="Creedence Clearwater Revival - Wikipedia, the free encyclopedia">Creedence Clearwater Revival</a></li> |
|
41 <li><a href="http://www.davematthewsband.com/" title="DAVE MATTHEWS BAND | Home Page | Dave Matthews Band">Dave Matthews Band</a></li> |
|
42 <li><a href="http://www.defleppard.com/news/" title="DefLeppard.com | the official Def Leppard web site">Def Leppard</a></li> |
|
43 <li><a href="http://www.eaglesband.com/" title="Eagles | eaglesband.com">The Eagles</a></li> |
|
44 <li><a href="http://www.bunnymen.com/" title="Echo & The Bunnymen">Echo and the Bunnymen</a></li> |
|
45 <li><a href="http://www.eminem.com/" title="Eminem : Official Site">Eminem</a></li> |
|
46 <li><a href="http://www.fleetwoodmac.com/" title="Fleetwood Mac">Fleetwood Mac</a></li> |
|
47 <li>Green Day</li> |
|
48 <li><a href="http://www.gunsnroses.com/" title="Guns N' Roses: Home: Chinese Democracy">Guns N' Roses</a></li> |
|
49 <li><a href="http://www.jamestaylor.com/" title="James Taylor: The Official Site">James Taylor</a></li> |
|
50 <li><a href="http://www.jay-z.com/index.php" title="Jay-Z.com: The Official Jay-Z Website">Jay-Z</a></li> |
|
51 <li><a href="http://en.wikipedia.org/wiki/Jimi_Hendrix" title="Jimi Hendrix - Wikipedia, the free encyclopedia">Jimi Hendrix</a></li> |
|
52 <li><a href="http://www.ledzeppelin.com/" title="Led Zeppelin - Official Website">Led Zeppelin</a></li> |
|
53 <li><a href="http://www.lynyrdskynyrd.com/" title="Lynyrd Skynyrd">Lynyrd Skynyrd</a></li> |
|
54 <li><a href="http://metallica.com/" title="Metallica.com">Metallica</a></li> |
|
55 <li>Motley Crue</li> |
|
56 <li><a href="http://www.neildiamond.com/" title="Official site from Neil Diamond">Neil Diamond</a></li> |
|
57 <li><a href="http://en.wikipedia.org/wiki/Nirvana_(band)" title="Nirvana (band) - Wikipedia, the free encyclopedia">Nirvana</a></li> |
|
58 <li><a href="http://www.ozzy.com/" title="Ozzy Osbourne | The Official Ozzy Osbourne Site">Ozzy Osbourne</a></li> |
|
59 <li><a href="http://pearljam.com/" title="Home | Pearl Jam - Ten Club">Pearl Jam</a></li> |
|
60 <li><a href="http://www.pinkfloyd.com/" title="Pink Floyd | The Official Site">Pink Floyd</a></li> |
|
61 <li><a href="http://www.queenonline.com/" title="Queen Online.com">Queen</a></li> |
|
62 <li><a href="http://www.rodstewart.com/" title="Rod Stewart | The Official Rod Stewart Site">Rod Stewart</a></li> |
|
63 <li><a href="http://www.rush.com/" title="RUSH - Official Website">Rush</a></li> |
|
64 <li><a href="http://www.santana.com/" title="SANTANA - The Official Carlos Santana Web Site">Santana</a></li> |
|
65 <li><a href="http://www.simonandgarfunkel.com/" title="Simon & Garfunkel official site">Simon and Garfunkel</a></li> |
|
66 <li><a href="http://www.stevemillerband.com/" title="Steve Miller Band - Official Web Site">Steve Miller Band</a></li> |
|
67 <li><a href="http://www.thebeatles.com/" title="The Beatles">The Beatles</a></li> |
|
68 <li><a href="http://www.thedoors.com/" title="The Doors">The Doors</a></li> |
|
69 <li><a href="http://www.thepolicefile.com/" title="ThePoliceFile.com: The Police - Concert Tickets - World Tour - The Police">The Police</a></li> |
|
70 <li><a href="http://www.rollingstones.com/" title="The Official site of the Rolling Stones | Rollingstones.com">The Rolling Stones</a></li> |
|
71 <li><a href="http://www.tompetty.com/" title="TomPetty.com > Home">Tom Petty</a></li> |
|
72 <li><a href="http://www.u2.com/" title="U2 > Welcome">U2</a></li> |
|
73 <li><a href="http://www.van-halen.com/" title="Van-Halen.com | the official Van Halen web site">Van Halen</a></li> |
|
74 <li><a href="http://www.willienelson.com/" title="Home » |
|
75 Willie Nelson">Willie Nelson</a></li> |
|
76 <li><a href="http://www.zztop.com/" title="ZZ Top | Home">ZZ Top</a></li> |
|
77 </ul> |
|
78 </div> |
|
79 </div> |
|
80 |
|
81 <div id="additional-content"> |
|
82 <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> |
|
83 <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> |
|
84 </div> |
|
85 |
|
86 <script type="text/javascript" charset="utf-8"> |
|
87 YUI().use('scrollview', function(Y) { |
|
88 |
|
89 var scrollView = new Y.ScrollView({ |
|
90 id: "scrollview", |
|
91 srcNode: '#scrollview-content', |
|
92 height: 310, |
|
93 flick: { |
|
94 minDistance:10, |
|
95 minVelocity:0.3, |
|
96 axis: "y" |
|
97 } |
|
98 }); |
|
99 |
|
100 scrollView.render(); |
|
101 |
|
102 var content = scrollView.get("contentBox"); |
|
103 |
|
104 content.delegate("click", function(e) { |
|
105 // Prevent links from navigating as part of a scroll gesture |
|
106 if (Math.abs(scrollView.lastScrolledAmt) > 2) { |
|
107 e.preventDefault(); |
|
108 Y.log("Link behavior suppressed.") |
|
109 } |
|
110 }, "a"); |
|
111 |
|
112 content.delegate("mousedown", function(e) { |
|
113 // Prevent default anchor drag behavior, on browsers which let you drag anchors to the desktop |
|
114 e.preventDefault(); |
|
115 }, "a"); |
|
116 }); |
|
117 |
|
118 </script> |
|
119 |
|
120 <script> |
|
121 YUI.Env.Tests = { |
|
122 examples: [], |
|
123 project: '../assets', |
|
124 assets: '../assets/scrollview', |
|
125 name: 'scrollview-scroll', |
|
126 title: 'ScrollView: ScrollView with Scroll Indicator and Link Suppression Behavior', |
|
127 newWindow: '', |
|
128 auto: false |
|
129 }; |
|
130 YUI.Env.Tests.examples.push('scrollview-base'); |
|
131 YUI.Env.Tests.examples.push('scrollview-scroll'); |
|
132 YUI.Env.Tests.examples.push('scrollview-horiz'); |
|
133 YUI.Env.Tests.examples.push('scrollview-paging'); |
|
134 |
|
135 </script> |
|
136 <script src="../assets/yui/test-runner.js"></script> |
|
137 |
|
138 |
|
139 </body> |
|
140 </html> |