source: Dev/trunk/src/client/dojox/mobile/tests/test_new_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: 4.0 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        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
10        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar:true, mblCSS3Transition: 'dojox/css3/transit'"></script>
11
12        <script type="text/javascript">
13                require([
14                        "dojox/mobile/parser",
15                        "dojox/mobile",
16                        "dojox/mobile/compat",
17                        "dojox/mobile/ScrollableView"
18                ]);
19        </script>
20
21        <style>
22        html,body {
23                height: 100%;
24                overflow: hidden;
25        }
26        .mblRoundRectCategory {
27                color: black;
28                text-shadow: rgba(192,192,192,1) 1px 1px 0px;
29        }
30        </style>
31</head>
32<body style="visibility:hidden;">
33        <div id="view1" data-dojo-type="dojox.mobile.ScrollableView" style="background-color:#855AA0;height:100%;">
34                <h1 data-dojo-type="dojox.mobile.Heading" style="background: -webkit-gradient(linear, left top, left bottom, from(#CDB0BC), to(#A26D84), color-stop(0.5, #B3889B), color-stop(0.5, #AF8195));">View 1</h1>
35                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Standard Transitions</h2>
36                <ul data-dojo-type="dojox.mobile.RoundRectList">
37                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view2", transition:"slide"'>
38                                Slide
39                        </li>
40                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view3", transition:"slide", transitionDir:-1'>
41                                Slide (Reverse)
42                        </li>
43                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"view2", transition:"flip"'>
44                                Flip
45                        </li>
46                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view2", transition:"fade"'>
47                                Fade
48                        </li>
49                </ul>
50        </div>
51
52        <div id="view2" data-dojo-type="dojox.mobile.ScrollableView" style="background-color:#009BB9;height:100%;">
53                <h1 data-dojo-type="dojox.mobile.Heading">View 2</h1>
54                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Standard Transitions</h2>
55                <ul data-dojo-type="dojox.mobile.RoundRectList">
56                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view3", transition:"slide"'>
57                                Slide
58                        </li>
59                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view1", transition:"slide", transitionDir:-1'>
60                                Slide (Reverse)
61                        </li>
62                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"view3", transition:"flip"'>
63                                Flip
64                        </li>
65                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view3", transition:"fade"'>
66                                Fade
67                        </li>
68                </ul>
69        </div>
70
71        <div id="view3" data-dojo-type="dojox.mobile.ScrollableView" style="background-color:#FFCC00;height:100%;">
72                <h1 data-dojo-type="dojox.mobile.Heading" style="background: -webkit-gradient(linear, left top, left bottom, from(#B0CDBC), to(#6DA284), color-stop(0.5, #88B39B), color-stop(0.5, #81AF95));">View 3</h1>
73                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Standard Transitions</h2>
74                <ul data-dojo-type="dojox.mobile.RoundRectList">
75                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view1", transition:"slide"'>
76                                Slide
77                        </li>
78                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"view2", transition:"slide", transitionDir:-1'>
79                                Slide (Reverse)
80                        </li>
81                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"view1", transition:"flip"'>
82                                Flip
83                        </li>
84                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"view1", transition:"fade"'>
85                                Fade
86                        </li>
87                </ul>
88        </div>
89
90</body>
91</html>
Note: See TracBrowser for help on using the repository browser.