|
525
|
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>Basic ScrollView</h1> |
|
|
29 |
</div> |
|
|
30 |
<div id="scrollview-content" class="yui3-scrollview-loading"> |
|
|
31 |
<ul> |
|
|
32 |
<li>AC/DC</li> |
|
|
33 |
<li>Aerosmith</li> |
|
|
34 |
<li>Billy Joel</li> |
|
|
35 |
<li>Bob Dylan</li> |
|
|
36 |
<li>Bob Seger</li> |
|
|
37 |
<li>Bon Jovi</li> |
|
|
38 |
<li>Bruce Springsteen</li> |
|
|
39 |
<li>Creed</li> |
|
|
40 |
<li>Creedence Clearwater Revival</li> |
|
|
41 |
<li>Dave Matthews Band</li> |
|
|
42 |
<li>Def Leppard</li> |
|
|
43 |
<li>Eagles</li> |
|
|
44 |
<li>Eminem</li> |
|
|
45 |
<li>Fleetwood Mac</li> |
|
|
46 |
<li>Green Day</li> |
|
|
47 |
<li>Guns N' Roses</li> |
|
|
48 |
<li>James Taylor</li> |
|
|
49 |
<li>Jay-Z</li> |
|
|
50 |
<li>Jimi Hendrix</li> |
|
|
51 |
<li>Led Zeppelin</li> |
|
|
52 |
<li>Lynyrd Skynyrd</li> |
|
|
53 |
<li>Metallica</li> |
|
|
54 |
<li>Motley Crue</li> |
|
|
55 |
<li>Neil Diamond</li> |
|
|
56 |
<li>Nirvana</li> |
|
|
57 |
<li>Ozzy Osbourne</li> |
|
|
58 |
<li>Pearl Jam</li> |
|
|
59 |
<li>Pink Floyd</li> |
|
|
60 |
<li>Queen</li> |
|
|
61 |
<li>Rod Stewart</li> |
|
|
62 |
<li>Rush</li> |
|
|
63 |
<li>Santana</li> |
|
|
64 |
<li>Simon and Garfunkel</li> |
|
|
65 |
<li>Steve Miller Band</li> |
|
|
66 |
<li>The Beatles</li> |
|
|
67 |
<li>The Doors</li> |
|
|
68 |
<li>The Police</li> |
|
|
69 |
<li>The Rolling Stones</li> |
|
|
70 |
<li>Tom Petty</li> |
|
|
71 |
<li>U2</li> |
|
|
72 |
<li>Van Halen</li> |
|
|
73 |
<li>Willie Nelson</li> |
|
|
74 |
<li>ZZ Top</li> |
|
|
75 |
</ul> |
|
|
76 |
</div> |
|
|
77 |
</div> |
|
|
78 |
|
|
|
79 |
<div id="additional-content"> |
|
|
80 |
<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> |
|
|
81 |
<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> |
|
|
82 |
</div> |
|
|
83 |
|
|
|
84 |
<script type="text/javascript" charset="utf-8"> |
|
|
85 |
|
|
|
86 |
YUI().use('scrollview-base', function(Y) { |
|
|
87 |
var scrollview = new Y.ScrollView({ |
|
|
88 |
id:"scrollview", |
|
|
89 |
srcNode: '#scrollview-content', |
|
|
90 |
height: 310, |
|
|
91 |
flick: { |
|
|
92 |
minDistance:10, |
|
|
93 |
minVelocity:0.3, |
|
|
94 |
axis: "y" |
|
|
95 |
} |
|
|
96 |
}); |
|
|
97 |
|
|
|
98 |
scrollview.render(); |
|
|
99 |
}); |
|
|
100 |
|
|
|
101 |
</script> |
|
|
102 |
|
|
|
103 |
|
|
|
104 |
<script> |
|
|
105 |
YUI.Env.Tests = { |
|
|
106 |
examples: [], |
|
|
107 |
project: '../assets', |
|
|
108 |
assets: '../assets/scrollview', |
|
|
109 |
name: 'scrollview-base', |
|
|
110 |
title: 'ScrollView: Basic ScrollView Without a Scroll Indicator', |
|
|
111 |
newWindow: '', |
|
|
112 |
auto: false |
|
|
113 |
}; |
|
|
114 |
YUI.Env.Tests.examples.push('scrollview-base'); |
|
|
115 |
YUI.Env.Tests.examples.push('scrollview-scroll'); |
|
|
116 |
YUI.Env.Tests.examples.push('scrollview-horiz'); |
|
|
117 |
YUI.Env.Tests.examples.push('scrollview-paging'); |
|
|
118 |
|
|
|
119 |
</script> |
|
|
120 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
121 |
|
|
|
122 |
|
|
|
123 |
|
|
|
124 |
</body> |
|
|
125 |
</html> |