source: Dev/trunk/src/client/dojox/mobile/tests/test_GridLayout-demo.html

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

Added Dojo 1.9.3 release.
File size: 8.6 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>GridLayout</title>
8
9        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Button','EdgeToEdgeCategory','GridLayout','dojox/mobile/themes/common/domButtons.css']"></script>
10        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
11
12        <script type="text/javascript">
13                require([
14                        "dojo/_base/connect",
15                        "dojo/dom",
16                        "dojo/ready",
17                        "dijit/registry",
18                        "dojox/mobile/TransitionEvent",
19                        "dojox/mobile/iconUtils",
20                        "dojox/mobile/parser",
21                        "dojox/mobile",
22                        "dojox/mobile/compat",
23                        "dojox/mobile/ScrollableView",
24                        "dojox/mobile/GridLayout",
25                        "dojox/mobile/Pane",
26                        "dojox/mobile/Button",
27                        "dojox/mobile/EdgeToEdgeCategory",
28                        "dojox/mobile/TextBox"
29                ], function(connect, dom, ready, registry, TransitionEvent, iconUtils){
30                        ready(function(){
31                                iconUtils.createDomButton(dom.byId("Minus"));
32                                iconUtils.createDomButton(dom.byId("Plus"));
33                        });
34
35                        goToSubMenu = function(id){
36                                var widget = registry.byId("pane1");
37                                var opts = {moveTo: "view2", transition: "slide", transitionDir: 1};
38                                var ev = new TransitionEvent(widget.domNode, opts);
39                                ev.dispatch()
40                        };
41
42                        goToOrder = function(id){
43                                var widget = registry.byId("pane2-1");
44                                var opts = {moveTo: "view3", transition: "slide", transitionDir: 1};
45                                var ev = new TransitionEvent(widget.domNode, opts);
46                                ev.dispatch()
47                        };
48
49
50                        plus = function(){
51                                var widget = registry.byId("num");
52                                valueInt = parseInt(widget.textbox.value);
53                                valueInt = isNaN(valueInt) ? 0 : valueInt + 1;
54                                widget.textbox.value = valueInt.toString()
55                        };
56
57                        minus = function(){
58                                var widget = registry.byId("num");
59                                valueInt = parseInt(widget.textbox.value);
60                                valueInt = isNaN(valueInt) || valueInt <=0 ? 0 : valueInt - 1;
61                                widget.textbox.value = valueInt.toString()
62                        };
63                       
64                        cancel = function(){
65                                var widget = registry.byId("cancel");
66                                var opts = {moveTo: "view2", transition: "slide", transitionDir: -1};
67                                var ev = new TransitionEvent(widget.domNode, opts);
68                                ev.dispatch()
69                        };
70
71                        ok = function(){
72                                var widget = registry.byId("ok");
73                                var opts = {moveTo: "view1", transition: "fade", transitionDir: -1};
74                                var ev = new TransitionEvent(widget.domNode, opts);
75                                ev.dispatch()
76                        }
77                       
78                });
79        </script>
80        <style>
81                .myPane {
82                        width: 100%;
83                        height: 50px;
84                }
85                .line {
86                        margin: 0;
87                        position:relative;
88                        border: 1px groove white;
89                        width: 100%;
90                        height: 100%;
91                }
92                .myIcon {
93                        margin-top:28px;
94                        margin-left:2px;
95                        border-radius: 10px;
96                        width:50px;
97                        height:42px;
98                        float:left;
99                }
100                .price {
101                        float:right;
102                        border-radius: 4px;
103                        margin-top:0px;
104                        margin-right:3px;
105                        border: 2px groove #959da0;
106                        padding: 0px 7px 0px 5px;
107                        background-image: -webkit-gradient(linear, left top, left bottom, from(#959da0), to(#515761));
108                        color: white;
109                        font-size: 18px;
110                }
111                .OrderItem {
112                        margin-top:15px;
113                        margin-left:3px;
114                        font-size: 18px;
115                }
116                .SubCategory {
117                        margin-top:38px;
118                        margin-left:55px;
119                        font-size: 24px;
120                }
121                .Discription {
122                        margin-top:17px;
123                        margin-left:13px;
124                        font-size: 18px;
125                }
126                .mybutton {
127                        margin-top:30px;
128                        margin-left:15%;
129                        margin-right:15%;
130                        width:70%;
131                }
132                .title {
133                        color:white;
134                        font-style:italic;
135                        text-shadow:0px -1px 10px blue,1px 0px 10px blue,0px 1px 10px blue,-1px 0px 10px blue;
136                        font-size:50px;
137                }
138        </style>
139</head>
140<body style="visibility:hidden;">
141        <div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
142                <div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:1' style="height:600px;">
143                        <div data-dojo-type="dojox.mobile.Pane" style="width:100%;position:relative">
144                                <img alt="" src='images/Mountain.jpg' style="width:100%;height:100%"/>
145                                <div style="position:absolute;top:40%;left:10%;" class="title">Airport lounge <br>cafe</div>
146                        </div>
147                        <div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:2' style="height: 300px;">
148                                <div id="pane1" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(1)">
149                                        <div class="line"><img alt="" src='images/menu1.jpg' class="myIcon"/><div class="SubCategory">Caff</div></div>
150                                </div>
151                                <div id="pane2" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(2)">
152                                        <div class="line"><img alt="" src='images/menu2.jpg' class="myIcon"/><div class="SubCategory">Bakery</div></div>
153                                </div>
154                                <div id="pane3" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(3)">
155                                        <div class="line"><img alt="" src='images/menu3.jpg' class="myIcon"/><div class="SubCategory">Tea</div></div>
156                                </div>
157                                <div id="pane4" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(4)">
158                                        <div class="line"><img alt="" src='images/menu4.jpg' class="myIcon"/><div class="SubCategory">Cake</div></div>
159                                </div>
160                                <div id="pane5" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(5)">
161                                        <div class="line"><img alt="" src='images/menu5.jpg' class="myIcon"/><div class="SubCategory">Beverage</div></div>
162                                </div>
163                                <div id="pane6" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToSubMenu(6)">
164                                        <div class="line"><img alt="" src='images/menu6.jpg' class="myIcon"/><div class="SubCategory">Icecream</div></div>
165                                </div>
166                        </div>
167                </div>
168        </div>
169        <div id="view2" data-dojo-type="dojox.mobile.ScrollableView">
170                <div data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Back", moveTo:"view1"'></div>
171                        <div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:2' style="height: 300px;">
172                                <div id="pane2-1" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(1)">
173                                        <div class="line"><div class="Discription">Coffee<div class="price">4.00</div></div></div>
174                                </div>
175                                <div id="pane2-2" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(2)">
176                                        <div class="line"><div class="Discription">Cappuccino<div class="price">5.00</div></div></div>
177                                </div>
178                                <div id="pane2-3" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(3)">
179                                        <div class="line"><div class="Discription">Cafe' au lait<div class="price">5.00</div></div></div>
180                                </div>
181                                <div id="pane2-4" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(4)">
182                                        <div class="line"><div class="Discription">Espresso<div class="price">4.00</div></div></div>
183                                </div>
184                                <div id="pane2-5" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(5)">
185                                        <div class="line"><div class="Discription">Ice Coffee<div class="price">4.00</div></div></div>
186                                </div>
187                                <div id="pane2-6" data-dojo-type="dojox.mobile.Pane" class="myPane" onclick="goToOrder(6)">
188                                        <div class="line"><div class="Discription">Ice Cafe' au lait<div class="price">5.00</div></div></div>
189                                </div>
190                        </div>
191        </div>
192        <div id="view3" data-dojo-type="dojox.mobile.ScrollableView">
193                <div data-dojo-type="dojox.mobile.GridLayout" data-dojo-props='cols:2'>
194                        <div data-dojo-type="dojox.mobile.Pane">
195                                <div data-dojo-type="dojox.mobile.EdgeToEdgeCategory">Order</div>
196                                <div id="pane7" style="width:100%;height:50px;position:relative"">
197                                        <div class="line"><div class="OrderItem"><span id="OrderItem">Espresso<span><div id="OrderPrice" class="price">5.00</div></div></div>
198                                </div>
199                        </div>
200                        <div data-dojo-type="dojox.mobile.Pane">
201                                <div data-dojo-type="dojox.mobile.EdgeToEdgeCategory">Count</div>
202
203                                <table style="position:relative;width:100%">
204                                        <tr>
205                                                <td><input id="num" data-dojo-type="dojox.mobile.TextBox" data-dojo-props='value:1, placeHolder:"Count", size:3' style="width:80%;height:40px;text-align:right;font-size: 18px;"></td>
206                                                <td><div id ="Plus" class="mblDomButtonBluePlus" onclick="plus()" style="margin:0 auto 0 auto;"></div></td>
207                                                <td><div id ="Minus" class="mblDomButtonBlueMinus" onclick="minus()" style="margin:0 auto 0 auto;"></div></td>
208                                        </tr>
209                                </table>
210                        </div>
211                        <div data-dojo-type="dojox.mobile.Pane">
212                                <button id ="cancel"  data-dojo-type="dojox.mobile.Button" class="mblRedButton" onclick="cancel()" style="margin-top:10px;margin-left:5%;margin-right:5%;width:90%;height:40px;">Cancel</button>
213                        </div>
214                        <div data-dojo-type="dojox.mobile.Pane">
215                                <button id="ok" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ok()" style="margin-top:10px;margin-left:5%;margin-right:5%;width:90%;height:40px;">OK</button>
216                        </div>
217                </div>
218        </div>
219</body>
220</html>
Note: See TracBrowser for help on using the repository browser.