source: Dev/trunk/src/client/dojox/mobile/tests/test_transition-animations2.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 12.2 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
6        <meta name="apple-mobile-web-app-capable" content="yes"/>
7        <title>Transition Animations on ScrollableView</title>
8
9        <link href="../themes/common/transitions.css" rel="stylesheet"/>
10        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
11        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar:true"></script>
12
13        <script type="text/javascript">
14                require([
15                        "dojox/mobile/parser",
16                        "dojox/mobile",
17                        "dojox/mobile/compat",
18                        "dojox/mobile/ScrollableView"
19                ]);
20        </script>
21
22        <style>
23        html,body {
24                height: 100%;
25                overflow: hidden;
26        }
27        .mblView {
28                background-color: #c5ccd3;
29        }
30        .android_theme .mblView {
31                background-color: black;
32        }
33        .blackberry_theme .mblView {
34                background-color: #DEDFDE;
35        }
36        .custom_theme .mblView {
37                background-color: #eff1f3;
38        }
39        </style>
40</head>
41<body style="visibility:hidden;">
42        <div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
43                <h1 data-dojo-type="dojox.mobile.Heading">View 1</h1>
44                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Standard Transitions</h2>
45                <ul data-dojo-type="dojox.mobile.RoundRectList">
46                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view2", transition:"slide"'>
47                                Slide
48                        </li>
49                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view3", transition:"slide", transitionDir:-1'>
50                                Slide (Reverse)
51                        </li>
52                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"view2", transition:"flip"'>
53                                Flip
54                        </li>
55                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view2", transition:"fade"'>
56                                Fade
57                        </li>
58                </ul>
59                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Extended Transitions</h2>
60                <ul data-dojo-type="dojox.mobile.RoundRectList">
61                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view2", transition:"dissolve"'>
62                                Dissolve
63                        </li>
64                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-7.png", moveTo:"view2", transition:"cover"'>
65                                Cover
66                        </li>
67                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-7.png", moveTo:"view3", transition:"cover", transitionDir:-1'>
68                                Cover (Reverse)
69                        </li>
70                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view2", transition:"reveal"'>
71                                Reveal
72                        </li>
73                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view3", transition:"reveal", transitionDir:-1'>
74                                Reveal (Reverse)
75                        </li>
76                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png", moveTo:"view2", transition:"slidev"'>
77                                Slide Vertical
78                        </li>
79                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png", moveTo:"view3", transition:"slidev", transitionDir:-1'>
80                                Slide Vertical (Reverse)
81                        </li>
82                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view2", transition:"coverv"'>
83                                Cover Vertical
84                        </li>
85                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view3", transition:"coverv", transitionDir:-1'>
86                                Cover Vertical (Reverse)
87                        </li>
88                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view2", transition:"revealv"'>
89                                Reveal Vertical
90                        </li>
91                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view3", transition:"revealv", transitionDir:-1'>
92                                Reveal Vertical (Reverse)
93                        </li>
94                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-10.png", moveTo:"view2", transition:"swirl"'>
95                                Swirl
96                        </li>
97                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-10.png", moveTo:"view3", transition:"swirl", transitionDir:-1'>
98                                Swirl (Reverse)
99                        </li>
100                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view2", transition:"zoomOut"'>
101                                Zoom Out
102                        </li>
103                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view2", transition:"zoomIn"'>
104                                Zoom In
105                        </li>
106                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view2", transition:"scaleOut"'>
107                                Scale Out
108                        </li>
109                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view2", transition:"scaleIn"'>
110                                Scale In
111                        </li>
112                </ul>
113        </div>
114
115        <div id="view2" data-dojo-type="dojox.mobile.ScrollableView">
116                <h1 data-dojo-type="dojox.mobile.Heading">View 2</h1>
117                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Standard Transitions</h2>
118                <ul data-dojo-type="dojox.mobile.RoundRectList">
119                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view3", transition:"slide"'>
120                                Slide
121                        </li>
122                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view1", transition:"slide", transitionDir:-1'>
123                                Slide (Reverse)
124                        </li>
125                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"view3", transition:"flip"'>
126                                Flip
127                        </li>
128                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view3", transition:"fade"'>
129                                Fade
130                        </li>
131                </ul>
132                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Extended Transitions</h2>
133                <ul data-dojo-type="dojox.mobile.RoundRectList">
134                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view3", transition:"dissolve"'>
135                                Dissolve
136                        </li>
137                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-7.png", moveTo:"view3", transition:"cover"'>
138                                Cover
139                        </li>
140                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-7.png", moveTo:"view1", transition:"cover", transitionDir:-1'>
141                                Cover (Reverse)
142                        </li>
143                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view3", transition:"reveal"'>
144                                Reveal
145                        </li>
146                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view1", transition:"reveal", transitionDir:-1'>
147                                Reveal (Reverse)
148                        </li>
149                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png", moveTo:"view3", transition:"slidev"'>
150                                Slide Vertical
151                        </li>
152                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png", moveTo:"view1", transition:"slidev", transitionDir:-1'>
153                                Slide Vertical (Reverse)
154                        </li>
155                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view3", transition:"coverv"'>
156                                Cover Vertical
157                        </li>
158                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view1", transition:"coverv", transitionDir:-1'>
159                                Cover Vertical (Reverse)
160                        </li>
161                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view3", transition:"revealv"'>
162                                Reveal Vertical
163                        </li>
164                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view1", transition:"revealv", transitionDir:-1'>
165                                Reveal Vertical (Reverse)
166                        </li>
167                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-10.png", moveTo:"view3", transition:"swirl"'>
168                                Swirl
169                        </li>
170                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-10.png", moveTo:"view1", transition:"swirl", transitionDir:-1'>
171                                Swirl (Reverse)
172                        </li>
173                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view3", transition:"zoomOut"'>
174                                Zoom Out
175                        </li>
176                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view3", transition:"zoomIn"'>
177                                Zoom In
178                        </li>
179                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view3", transition:"scaleOut"'>
180                                Scale Out
181                        </li>
182                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view3", transition:"scaleIn"'>
183                                Scale In
184                        </li>
185                </ul>
186        </div>
187
188        <div id="view3" data-dojo-type="dojox.mobile.ScrollableView">
189                <h1 data-dojo-type="dojox.mobile.Heading">View 3</h1>
190                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Standard Transitions</h2>
191                <ul data-dojo-type="dojox.mobile.RoundRectList">
192                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view1", transition:"slide"'>
193                                Slide
194                        </li>
195                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view2", transition:"slide", transitionDir:-1'>
196                                Slide (Reverse)
197                        </li>
198                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"view1", transition:"flip"'>
199                                Flip
200                        </li>
201                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view1", transition:"fade"'>
202                                Fade
203                        </li>
204                </ul>
205                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Extended Transitions</h2>
206                <ul data-dojo-type="dojox.mobile.RoundRectList">
207                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view1", transition:"dissolve"'>
208                                Dissolve
209                        </li>
210                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-7.png", moveTo:"view1", transition:"cover"'>
211                                Cover
212                        </li>
213                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-7.png", moveTo:"view2", transition:"cover", transitionDir:-1'>
214                                Cover (Reverse)
215                        </li>
216                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view1", transition:"reveal"'>
217                                Reveal
218                        </li>
219                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view2", transition:"reveal", transitionDir:-1'>
220                                Reveal (Reverse)
221                        </li>
222                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png", moveTo:"view1", transition:"slidev"'>
223                                Slide Vertical
224                        </li>
225                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png", moveTo:"view2", transition:"slidev", transitionDir:-1'>
226                                Slide Vertical (Reverse)
227                        </li>
228                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view1", transition:"coverv"'>
229                                Cover Vertical
230                        </li>
231                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png", moveTo:"view2", transition:"coverv", transitionDir:-1'>
232                                Cover Vertical (Reverse)
233                        </li>
234                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view1", transition:"revealv"'>
235                                Reveal Vertical
236                        </li>
237                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png", moveTo:"view2", transition:"revealv", transitionDir:-1'>
238                                Reveal Vertical (Reverse)
239                        </li>
240                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-10.png", moveTo:"view1", transition:"swirl"'>
241                                Swirl
242                        </li>
243                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-10.png", moveTo:"view2", transition:"swirl", transitionDir:-1'>
244                                Swirl (Reverse)
245                        </li>
246                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view1", transition:"zoomOut"'>
247                                Zoom Out
248                        </li>
249                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view1", transition:"zoomIn"'>
250                                Zoom In
251                        </li>
252                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view1", transition:"scaleOut"'>
253                                Scale Out
254                        </li>
255                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png", moveTo:"view1", transition:"scaleIn"'>
256                                Scale In
257                        </li>
258                </ul>
259        </div>
260
261</body>
262</html>
Note: See TracBrowser for help on using the repository browser.