source: Dev/trunk/src/client/dojox/mobile/tests/test_ValuePicker-dialog.html

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

Added Dojo 1.9.3 release.
File size: 5.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>ValuePicker on SimpleDialog</title>
8
9        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','SimpleDialog','ValuePicker']"></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/date/locale",
15                        "dojo/dom",
16                        "dojo/ready",
17                        "dijit/registry",
18                        "dojox/mobile/ProgressIndicator",
19                        "dojox/mobile/parser",
20                        "dojox/mobile",
21                        "dojox/mobile/compat",
22                        "dojox/mobile/SimpleDialog",
23                        "dojox/mobile/Button",
24                        "dojox/mobile/ValuePickerDatePicker",
25                        "dojox/mobile/ValuePickerTimePicker"
26                ], function(locale, dom, ready, registry, ProgressIndicator){
27                        var date;
28                        show = function(dlg){
29                                if(dlg == "dlg1"){
30                                        date = registry.byId("picker1").get("values");
31                                }else if(dlg == "dlg2"){
32                                        date = registry.byId("picker2").get("values");
33                                }
34                                registry.byId(dlg).show();
35                        };
36                        hide = function(dlg){
37                                registry.byId(dlg).hide();
38                        };
39                        cancel = function(dlg){
40                                if(dlg == "dlg1"){
41                                        registry.byId("picker1").set("values", date);
42                                }else if(dlg == "dlg2"){
43                                        registry.byId("picker2").set("values", date);
44                                }
45                                registry.byId(dlg).show();
46                                hide(dlg);
47                        };
48
49                        // Dialog Box
50                        updateDateDialog = function(){
51                                var d = registry.byId("picker1").get("date");
52                                if(d){
53                                        dom.byId("msg1").innerHTML =
54                                                locale.format(d, {formatLength:"full",selector:"date"});
55                                }
56                        };
57                        updateTimeDialog = function(){
58                                var d = registry.byId("picker2").get("date");
59                                if(d){
60                                        dom.byId("msg2").innerHTML =
61                                                locale.format(d, {timePattern:is24h?"H:mm":"h:mm a",selector:"time"});
62                                }
63                        };
64                        onValueChanged1 = function(){
65                                updateDateDialog();
66                        };
67                        onValueChanged2 = function(){
68                                updateTimeDialog();
69                        };
70
71
72                        // ListItem
73                        updateDateListItem = function(){
74                                var d = registry.byId("picker1").get("date");
75                                if(d){
76                                        dom.byId("dateMsg").innerHTML =
77                                                locale.format(d, {formatLength:"short",selector:"date"});
78                                }
79                        };
80                        updateTimeListItem = function(){
81                                var d = registry.byId("picker2").get("date");
82                                if(d){
83                                        dom.byId("timeMsg").innerHTML =
84                                                locale.format(d, {timePattern:is24h?"H:mm":"h:mm a",selector:"time"});
85                                }
86                        };
87
88                        setDate = function(){
89                                updateDateListItem();
90                                hide('dlg1');
91                        };
92                        setTime = function(){
93                                updateTimeListItem();
94                                hide('dlg2');
95                        };
96
97                        is24h = true;
98                        use24h = function(){
99                                var listItem = registry.byId("item1")
100                                if(is24h){
101                                        listItem.set("rightIcon", "mblDomButtonCheckboxOff");
102                                        dom.byId("use24hMsg").innerHTML = "1:00 pm";
103                                        registry.byId("picker2").set("is24h", false);
104                                }else{
105                                        listItem.set("rightIcon", "mblDomButtonCheckboxOn");
106                                        dom.byId("use24hMsg").innerHTML = "13:00";
107                                        registry.byId("picker2").set("is24h", true);
108                                }
109                                is24h = !is24h;
110                                updateTimeDialog();
111                                updateTimeListItem();
112                        };
113
114                        ready(function(){
115                                updateDateListItem();
116                                updateTimeListItem();
117//                              show("dlg1");
118                        })
119                });
120
121        </script>
122
123        <style>
124        .mblValuePicker {
125                display: inline-block; /* to align center */
126        }
127        #dlg1, #dlg2 {
128                width: 300px;
129                padding: 0;
130        }
131        span.dlgBtn {
132                padding: 0;
133                width: 130px;
134        }
135        .subtitle {
136                color: #00e7e6;
137                font-size: 12px;
138        }
139        </style>
140</head>
141<body style="visibility:hidden;">
142        <div id="dlg1" data-dojo-type="dojox.mobile.SimpleDialog">
143                <div style="text-align:left;margin:6px">
144                        <img src="images/tab-icon-19.png" style="vertical-align:middle">
145                        <span id="msg1"></span>
146                </div>
147                <div id="picker1" data-dojo-type="dojox.mobile.ValuePickerDatePicker" data-dojo-props="onValueChanged:onValueChanged1"></div>
148                <div style="background-color:#bdbabd;margin-top:6px;">
149                        <span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="setDate()">Set</span>
150                        <span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="cancel('dlg1')">Cancel</span>
151                </div>
152        </div>
153
154        <div id="dlg2" data-dojo-type="dojox.mobile.SimpleDialog">
155                <div style="text-align:left;margin:6px">
156                        <img src="images/tab-icon-19.png" style="vertical-align:middle">
157                        <span id="msg2"></span>
158                </div>
159                <div id="picker2" data-dojo-type="dojox.mobile.ValuePickerTimePicker" data-dojo-props="is24h:true,onValueChanged:onValueChanged2"></div>
160                <div style="background-color:#bdbabd;margin-top:6px;">
161                        <span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="setTime()">Set</span>
162                        <span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="cancel('dlg2')">Cancel</span>
163                </div>
164        </div>
165
166        <div id="view" data-dojo-type="dojox.mobile.View">
167                <ul data-dojo-type="dojox.mobile.EdgeToEdgeList" data-dojo-props='variableHeight:true'>
168                        <li data-dojo-type="dojox.mobile.ListItem"
169                                data-dojo-props='clickable:true,noArrow:true,onClick:function(){show("dlg1")}'>
170                                Set date
171                                <div id="dateMsg" class="subtitle">2012/02/23</div>
172                        </li>
173                        <li data-dojo-type="dojox.mobile.ListItem"
174                                data-dojo-props='clickable:true,noArrow:true,onClick:function(){show("dlg2")}'>
175                                Set time
176                                <div id="timeMsg" class="subtitle">22:34</div>
177                        </li>
178                        <li id="item1" data-dojo-type="dojox.mobile.ListItem"
179                                data-dojo-props='clickable:true,noArrow:true,rightIcon:"mblDomButtonCheckboxOn",onClick:function(){use24h()}'>
180                                Use 24-hour format
181                                <div id="use24hMsg" class="subtitle">13:00</div>
182                        </li>
183                </ul>
184        </div>
185</body>
186</html>
Note: See TracBrowser for help on using the repository browser.