source: Dev/trunk/src/client/dojox/mobile/tests/test_SimpleDialog.html

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

Added Dojo 1.9.3 release.
File size: 7.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>Simple Dialog Test</title>
8
9        <link href="../themes/common/domButtons.css" rel="stylesheet"/>
10        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','SimpleDialog','TextBox','Button','Slider']"></script>
11        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
12
13        <script type="text/javascript">
14                require([
15                        "dojo/dom",
16                        "dijit/registry",
17                        "dojox/mobile/ProgressIndicator",
18                        "dojox/mobile/parser",
19                        "dojox/mobile",
20                        "dojox/mobile/compat",
21                        "dojox/mobile/SimpleDialog",
22                        "dojox/mobile/TextBox",
23                        "dojox/mobile/Button",
24                        "dojox/mobile/Slider"
25                ], function(dom, registry, ProgressIndicator){
26                        show = function(dlg){
27                                registry.byId(dlg).show();
28                        }
29                        hide = function(dlg){
30                                registry.byId(dlg).hide();
31                        }
32                        var prog;
33                        show_progress_indicator = function(dlg,cont){
34                                show(dlg);
35                                var container = dom.byId(cont);
36                                prog = ProgressIndicator.getInstance();
37                                container.appendChild(prog.domNode);
38                                prog.start();
39                                setTimeout(function(){
40                                        hide_progress_indicator(dlg);
41                                }, 5000);
42                        }
43                        hide_progress_indicator = function(dlg){
44                                prog.stop();
45                                hide(dlg);
46                        }
47                });
48
49        </script>
50
51        <style>
52                .mblSimpleDialogInput {
53                        margin: 7px 0 14px;
54                        width: 260px;
55                }
56                .mblSimpleDialogButton {
57                        margin: 7px 0 0;
58                        width: 262px;
59                        font-size: 17px;
60                        font-weight: bold;
61                        opacity: 0.95;
62                }
63                .mblSimpleDialogButton2l {
64                        float: left;
65                        width: 127px;
66                        margin: 7px 0 0;
67                        font-size: 17px;
68                        font-weight: bold;
69                        opacity: 0.95;
70                }
71                .mblSimpleDialogButton2r {
72                        float: right;
73                        width: 127px;
74                        margin: 7px 0 0;
75                        font-size: 17px;
76                        font-weight: bold;
77                        opacity: 0.95;
78                }
79                .mblSimpleDialog .mblProgressIndicator {
80                        position: relative;
81                        margin: 14px 0 7px;
82                        top: 0;
83                }
84
85                .mblSimpleDialog .mblListItem {
86                        text-align: left;
87                }
88
89                .windows_theme .mblDomButtonSilverCircleGrayButton > div,
90                .windows_theme .mblDomButtonSilverCircleGreenButton > div {
91                        background-color: transparent !important;
92                        background-image: none !important;
93                        border: 2px solid white;
94                        border-radius: 25px;
95                }
96                .windows_theme .mblDomButtonSilverCircleGrayButton > div > div {
97                        background-color: transparent !important;
98                        background-image: none !important;
99                        border: none !important;
100                }
101                .windows_theme .mblDomButtonSilverCircleGreenButton > div > div {
102                        background-color: white !important;
103                }
104        </style>
105</head>
106<body style="visibility:hidden;">
107        <div id="dlg_message" data-dojo-type="dojox.mobile.SimpleDialog">
108                <div class="mblSimpleDialogTitle">Information</div>
109                <div class="mblSimpleDialogText">This is a sample dialog.</div>
110                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton" style="width:100px;" onclick="hide('dlg_message')">OK</button>
111        </div>
112
113        <div id="dlg_confirm" data-dojo-type="dojox.mobile.SimpleDialog">
114                <div class="mblSimpleDialogTitle">Rain Alert</div>
115                <div class="mblSimpleDialogText">Do you have an umbrella?</div>
116                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton" onclick="hide('dlg_confirm')">No</button>
117                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton mblBlueButton" onclick="hide('dlg_confirm')">Yes</button>
118        </div>
119       
120        <div id="dlg_login" data-dojo-type="dojox.mobile.SimpleDialog">
121                <div class="mblSimpleDialogTitle">Mobile Community</div>
122                <div class="mblSimpleDialogText">Enter your ID and Password</div>
123                <input data-dojo-type="dojox.mobile.TextBox" class="mblSimpleDialogInput" type="text" data-dojo-props='selectOnClick:true, placeHolder:"ID"' style="margin-bottom: 0;" required>
124                <input data-dojo-type="dojox.mobile.TextBox" class="mblSimpleDialogInput" type="password" data-dojo-props='selectOnClick:true, placeHolder:"Password"' style="margin-top: 0;" required>
125                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2l" onclick="hide('dlg_login')">Cancel</button>
126                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2r mblBlueButton" onclick="hide('dlg_login')">OK</button>
127        </div>
128
129        <div id="dlg_progress" data-dojo-type="dojox.mobile.SimpleDialog">
130                <div class="mblSimpleDialogText">Please wait for 5 seconds.</div>
131                <div class="mblSimpleDialogText" id="progress_indicator_container"></div>
132                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton mblRedButton" onclick="hide_progress_indicator('dlg_progress')">Cancel</button>
133        </div>
134
135        <div id="dlg_volume" data-dojo-type="dojox.mobile.SimpleDialog">
136                <div class="mblSimpleDialogTitle">Volume</div>
137                <div class="mblSimpleDialogText">Ringtone</div>
138                <input data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20" step="0.1" type="range" style="width:90%;">
139                <div class="mblSimpleDialogText">Media</div>
140                <input data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20" step="0.1" type="range" style="width:90%;">
141                <div class="mblSimpleDialogText">Alarm</div>
142                <input data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20" step="0.1" type="range" style="width:90%;">
143                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2l" onclick="hide('dlg_volume')">OK</button>
144                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2r" onclick="hide('dlg_volume')">Cancel</button>
145        </div>
146
147        <div id="dlg_select" data-dojo-type="dojox.mobile.SimpleDialog">
148                <div class="mblSimpleDialogTitle">Animation</div>
149                <ul data-dojo-type="dojox.mobile.EdgeToEdgeList" data-dojo-props='select:"single"'>
150                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='checkClass:"mblDomButtonSilverCircleGreenButton", uncheckClass:"mblDomButtonSilverCircleGrayButton"'>
151                                No animations
152                        </li>
153                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='checkClass:"mblDomButtonSilverCircleGreenButton", uncheckClass:"mblDomButtonSilverCircleGrayButton"'>
154                                Some animations
155                        </li>
156                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='checkClass:"mblDomButtonSilverCircleGreenButton", uncheckClass:"mblDomButtonSilverCircleGrayButton", checked:true'>
157                                All animations
158                        </li>
159                </ul>
160                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton" style="width:60%;" onclick="hide('dlg_select')">Cancel</button>
161        </div>
162
163        <div id="view" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
164                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
165                        Message Box <button onclick="show('dlg_message')">Show Dialog</button>
166                </div>
167                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
168                        Confirmation Dialog <button onclick="show('dlg_confirm')">Show Dialog</button>
169                </div>
170                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
171                        Login Dialog <button onclick="show('dlg_login')">Show Dialog</button>
172                </div>
173                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
174                        Progress Indicator <button onclick="show_progress_indicator('dlg_progress','progress_indicator_container')">Show Dialog</button>
175                </div>
176                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
177                        Volume Control <button onclick="show('dlg_volume')">Show Dialog</button>
178                </div>
179                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
180                        Selectable List <button onclick="show('dlg_select')">Show Dialog</button>
181                </div>
182        </div>
183                       
184</body>
185</html>
Note: See TracBrowser for help on using the repository browser.