source: Dev/trunk/src/client/dojox/mobile/tests/test_theme-switch.html

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

Added Dojo 1.9.3 release.
File size: 5.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>Dynamic Theme Switch</title>
8
9        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblThemeFiles: ['base','TabBar']"></script>
10
11        <script type="text/javascript">
12                require([
13                        "dojox/mobile/parser",
14                        "dojox/mobile",
15                        "dojox/mobile/compat",
16                        "dojox/mobile/deviceTheme",
17                        "dojox/mobile/TabBar"
18                ]);
19                change = function(ua){
20                        deviceTheme.loadDeviceTheme(ua);
21                }
22        </script>
23
24        <style>
25        .lnk {
26                font-size: 14px;
27                color: #0B5199;
28                text-decoration: none;
29        }
30        .mblColorPink {
31                background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9DE9), to(#cc62DD), color-stop(0.5, #ff6EDF), color-stop(0.5, #ff5FDC));
32                background-image: -moz-linear-gradient(top, #ff9DE9 0%, #ff6EDF 50%, #ff5FDC 50%, #cc62DD 100%);
33                background-color: pink;
34        }
35        .mblColorPink45 {
36                background-image: -webkit-gradient(linear, left top, right bottom, from(#ff9DE9), to(#cc62DD), color-stop(0.5, #ff6EDF), color-stop(0.5, #ff5FDC));
37                background-image: -moz-linear-gradient(top left, #ff9DE9 0%, #ff6EDF 50%, #ff5FDC 50%, #cc62DD 100%);
38        }
39        #themeHeading {
40                overflow: visible;
41                height: auto;
42        }
43        #themeHeading .mblTabBarSlimTab {
44                display: inline;
45                float: left;
46                height: auto;
47        }
48        </style>
49</head>
50<body style="visibility:hidden;">
51        <div id="foo" data-dojo-type="dojox.mobile.View">
52                <div id="themeHeading" data-dojo-type="dojox.mobile.Heading">
53                        <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='barType:"slimTab"' style="float:left">
54                                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='selected:true' onclick="change('iPhone')">iPhone</li>
55                                <li data-dojo-type="dojox.mobile.TabBarButton" onclick="change('iPad')">iPad</li>
56                                <li data-dojo-type="dojox.mobile.TabBarButton" onclick="change('Android')">Android</li>
57                                <li data-dojo-type="dojox.mobile.TabBarButton" onclick="change('BlackBerry')">BlackBerry</li>
58                                <li data-dojo-type="dojox.mobile.TabBarButton" onclick="change('Custom')">Custom</li>
59                        </ul>
60                </div>
61        <div data-dojo-type="dojox.mobile.Heading" data-dojo-props='label:"Arrow"'>
62                <span data-dojo-type="dojox.mobile.ToolBarButton" arrow="left" defaultColor="mblColorBlue" selColor="mblColorPink">MMMM</span>
63                <span data-dojo-type="dojox.mobile.ToolBarButton" arrow="right">MMMM</span>
64        </div>
65                <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Dynamic Theme Switch</h2>
66                <ul data-dojo-type="dojox.mobile.RoundRectList">
67                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"bar", transition:"slide"'>
68                                Slide
69                        </li>
70                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png", moveTo:"bar", transition:"flip"'>
71                                Flip
72                        </li>
73                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png", moveTo:"bar", transition:"fade"'>
74                                Fade
75                        </li>
76                </ul>
77        </div>
78
79        <div id="bar" data-dojo-type="dojox.mobile.View">
80                <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Home", moveTo:"foo"'>Search Result</h1>
81                <ul data-dojo-type="dojox.mobile.RoundRectList">
82                        <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px" data-dojo-props='variableHeight:true'>
83                                1. <a href="#" class="lnk">Dojo: Traditional Karate-do Spirit</a><br>
84                                Sarah Connor Hardcover<br>
85                                Eligible for FREE Super Saver Shipping<br>
86                                <span style="color:red">$14.50 (50%)</span> In Stock<br>
87                                # (531)
88                        </li>
89                        <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px" data-dojo-props='variableHeight:true'>
90                                2. <a href="#" class="lnk">Japanese Martial Arts Dojo</a><br>
91                                Martin Parker Hardcover<br>
92                                <span style="color:red">$14.00 (60%)</span> In Stock<br>
93                                # (173)
94                        </li>
95                        <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px" data-dojo-props='variableHeight:true'>
96                                3. <a href="#" class="lnk">Total Solar Eclipse</a><br>
97                                Steven Young Hardcover<br>
98                                Get it by Mar. 2 if you order in the next <span style="color:green"><b>16 hours</b></span><br>
99                                Eligible for FREE Super Saver Shipping<br>
100                                <span style="color:red">$9.50 (62%)</span> In Stock<br>
101                                # (1199)
102                        </li>
103                        <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px" data-dojo-props='variableHeight:true'>
104                                4. <a href="#" class="lnk">The History of Java Coffee</a><br>
105                                Marco Rodriguez Hardcover<br>
106                                <span style="color:blue">Not Available</span>
107                        </li>
108                        <li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px" data-dojo-props='variableHeight:true'>
109                                5. <a href="#" class="lnk">The Principles of Spider's Web</a><br>
110                                Melissa Morgan Hardcover<br>
111                                Eligible for FREE Super Saver Shipping<br>
112                                <span style="color:red">$12.00 (60%)</span> In Stock<br>
113                                # (1847)
114                        </li>
115                </ul>
116        </div>
117</body>
118</html>
Note: See TracBrowser for help on using the repository browser.