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

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

Added Dojo 1.9.3 release.
File size: 9.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"
6                  content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
7        <meta name="apple-mobile-web-app-capable" content="yes"/>
8        <title>Form Layout</title>
9
10        <script type="text/javascript" src="../deviceTheme.js"></script>
11        <script type="text/javascript" src="../../../dojo/dojo.js"
12                        data-dojo-config="async: true, parseOnLoad: true"></script>
13
14        <script type="text/javascript">
15                require([
16                        "dojox/mobile",
17                        "dojox/mobile/parser",
18                        "dojox/mobile/compat",
19                        "dojox/mobile/Button",
20                        "dojox/mobile/CheckBox",
21                        "dojox/mobile/ComboBox",
22                        "dojox/mobile/RadioButton",
23                        "dojox/mobile/Slider",
24                        "dojox/mobile/TextBox",
25                        "dojox/mobile/SearchBox",
26                        "dojox/mobile/ExpandingTextArea",
27                        "dojox/mobile/ToggleButton",
28                        "dojox/mobile/FormLayout"
29                ]);
30
31                myOnSearch = function (results, query, options) {
32                        if (results.length) {
33                                console.log('first paged result ' + (options.start + 1) + ' of ' + results.total + ': label = ' + results[0].name + ', value = ' + results[0].value);
34                                console.log('last paged result ' + (options.start + results.length) + ' of ' + results.total + ': label = ' + results[results.length - 1].name + ', value = ' + results[results.length - 1].value);
35                        } else if (results.total == 0) {
36                                console.log('no matching results');
37                        }
38                        if ((options.start + results.length) < results.total) {
39                                results.nextPage();
40                        }
41                };
42        </script>
43</head>
44<body style="visibility:hidden;">
45<datalist>
46        <select data-dojo-type="dijit.form.DataList" data-dojo-props='id:"states"'>
47                <option value="AL">Alabama</option>
48                <option value="AK">Alaska</option>
49                <option value="AS">American Samoa</option>
50                <option value="AZ">Arizona</option>
51                <option value="AR">Arkansas</option>
52                <option value="AE">Armed Forces Europe</option>
53                <option value="AP">Armed Forces Pacific</option>
54                <option value="AA">Armed Forces the Americas</option>
55                <option value="CA">California</option>
56                <option value="CO">Colorado</option>
57                <option value="CT">Connecticut</option>
58                <option value="DE">Delaware</option>
59                <option value="DC">District of Columbia</option>
60                <option value="FM">Federated States of Micronesia</option>
61                <option value="FL">Florida</option>
62                <option value="GA">Georgia</option>
63                <option value="GU">Guam</option>
64                <option value="HI">Hawaii</option>
65                <option value="ID">Idaho</option>
66                <option value="IL">Illinois</option>
67                <option value="IN">Indiana</option>
68                <option value="IA">Iowa</option>
69                <option value="KS">Kansas</option>
70                <option value="KY">Kentucky</option>
71                <option value="LA">Louisiana</option>
72                <option value="ME">Maine</option>
73                <option value="MH">Marshall Islands</option>
74                <option value="MD">Maryland</option>
75                <option value="MA">Massachusetts</option>
76                <option value="MI">Michigan</option>
77                <option value="MN">Minnesota</option>
78                <option value="MS">Mississippi</option>
79                <option value="MO">Missouri</option>
80                <option value="MT">Montana</option>
81                <option value="NE">Nebraska</option>
82                <option value="NV">Nevada</option>
83                <option value="NH">New Hampshire</option>
84                <option value="NJ">New Jersey</option>
85                <option value="NM">New Mexico</option>
86                <option value="NY">New York</option>
87                <option value="NC">North Carolina</option>
88                <option value="ND">North Dakota</option>
89                <option value="MP">Northern Mariana Islands</option>
90                <option value="OH">Ohio</option>
91                <option value="OK">Oklahoma</option>
92                <option value="OR">Oregon</option>
93                <option value="PA">Pennsylvania</option>
94                <option value="PR">Puerto Rico</option>
95                <option value="RI">Rhode Island</option>
96                <option value="SC">South Carolina</option>
97                <option value="SD">South Dakota</option>
98                <option value="TN">Tennessee</option>
99                <option value="TX">Texas</option>
100                <option value="UT">Utah</option>
101                <option value="VT">Vermont</option>
102                <option value="VI">Virgin Islands, U.S.</option>
103                <option value="VA">Virginia</option>
104                <option value="WA">Washington</option>
105                <option value="WV">West Virginia</option>
106                <option value="WI">Wisconsin</option>
107                <option value="WY">Wyoming</option>
108        </select>
109</datalist>
110
111<div data-dojo-type="dojox/mobile/View">
112        <h1 data-dojo-type="dojox/mobile/Heading">Form Layout</h1>
113
114        <div data-dojo-type="dojox/mobile/RoundRect">
115                <div data-dojo-type="dojox/mobile/FormLayout" data-dojo-props="rightAlign: false, columns:'single'">
116                        <div>
117                                <label>Buttons</label>
118                                <fieldset>
119                                        <button data-dojo-type="dojox/mobile/Button">Help</button>
120                                        <input type="submit" class="mblBlueButton" data-dojo-type="dojox/mobile/Button" value="Submit">
121                                        <button class="mblRedButton" data-dojo-type="dojox/mobile/Button">Cancel</button>
122                                </fieldset>
123                        </div>
124                        <div>
125                                <label>Checkbox</label>
126                                <fieldset><input type="checkbox" data-dojo-type="dojox/mobile/CheckBox"><label>Click me</label>
127                                </fieldset>
128                        </div>
129                        <div>
130                                <label>Toggle Button</label>
131                                <fieldset>
132                                        <button data-dojo-type="dojox/mobile/ToggleButton">Toggle me</button>
133                                </fieldset>
134                        </div>
135                        <div>
136                                <label>Switch</label>
137                                <fieldset><input type="checkbox" data-dojo-type="dojox/mobile/Switch" value="on"></fieldset>
138                        </div>
139                        <div>
140                                <label>Radio Button</label>
141                                <fieldset>
142                                        <input type="radio" id="rb1" data-dojo-type="dojox/mobile/RadioButton" name="mobileRadio"
143                                                   value="Large" checked><label for="rb1">1</label>
144                                        <input type="radio" id="rb2" data-dojo-type="dojox/mobile/RadioButton" name="mobileRadio"
145                                                   value="Medium"><label for="rb2">2</label>
146                                        <input type="radio" id="rb3" data-dojo-type="dojox/mobile/RadioButton" name="mobileRadio"
147                                                   value="Small"><label for="rb3">3</label>
148                                </fieldset>
149                        </div>
150                        <div>
151                                <label>Slider</label>
152                                <fieldset><input id="sh" name="shb" data-dojo-type="dojox/mobile/Slider" value="0" min="0" max="20"
153                                                                 step="0.1" type="range" style="width:150px;"></fieldset>
154                        </div>
155                        <div>
156                                <label>ComboBox</label>
157                                <fieldset><input type="text" data-dojo-type="dojox/mobile/ComboBox"
158                                                                 data-dojo-props='value:"", list:"states"'></fieldset>
159                        </div>
160                        <div>
161                                <label>TextArea</span></label>
162                                <fieldset>
163                                        <textarea data-dojo-type="dojox/mobile/TextArea" rows="3" cols="20">TextArea</textarea><br>
164                                        <textarea data-dojo-type="dojox/mobile/ExpandingTextArea" rows="3"
165                                                          cols="20">ExpandingTextArea</textarea>
166                                </fieldset>
167                        </div>
168                        <div>
169                                <label>TextBox</label>
170                                <fieldset><input data-dojo-type="dojox/mobile/TextBox" intermediateChanges="true" maxLength="9"
171                                                                 selectOnClick="true" placeHolder="max 9 chars"
172                                                                 onChange="console.log('onChange fired with ' + arguments[0])"></fieldset>
173                        </div>
174                        <div>
175                                <label>SearchBox</span></label>
176                                <fieldset><input data-dojo-type="dojox/mobile/SearchBox" type="search" selectOnClick="true"
177                                                                 placeHolder="Search" data-dojo-props='list:"states", pageSize:5, onSearch:myOnSearch'>
178                                </fieldset>
179                        </div>
180                </div>
181        </div>
182        <div data-dojo-type="dojox/mobile/RoundRect">
183                <div data-dojo-type="dojox/mobile/FormLayout" data-dojo-props="rightAlign: true">
184                        <div>
185                                <label>Button</label>
186                                <fieldset>
187                                        <button data-dojo-type="dojox/mobile/Button">Help</button>
188                                        <input type="submit" class="mblBlueButton" data-dojo-type="dojox/mobile/Button" value="Submit">
189                                        <button class="mblRedButton" data-dojo-type="dojox/mobile/Button">Cancel</button>
190                                </fieldset>
191                        </div>
192                        <div>
193                                <label>Checkbox</label>
194                                <fieldset><input type="checkbox" data-dojo-type="dojox/mobile/CheckBox"><label>Click me</label>
195                                </fieldset>
196                        </div>
197                        <div>
198                                <label>Toggle Button</label>
199                                <fieldset>
200                                        <button data-dojo-type="dojox/mobile/ToggleButton">Toggle me</button>
201                                </fieldset>
202                        </div>
203                        <div>
204                                <label>Switch</label>
205                                <fieldset><input type="checkbox" data-dojo-type="dojox/mobile/Switch" value="on"></fieldset>
206                        </div>
207                        <div>
208                                <label>Radio Button</label>
209                                <fieldset>
210                                        <input type="radio" id="rb1b" data-dojo-type="dojox/mobile/RadioButton" name="mobileRadio"
211                                                   value="Large" checked><label for="rb1b">1</label>
212                                        <input type="radio" id="rb2b" data-dojo-type="dojox/mobile/RadioButton" name="mobileRadio"
213                                                   value="Medium"><label for="rb2b">2</label>
214                                        <input type="radio" id="rb3b" data-dojo-type="dojox/mobile/RadioButton" name="mobileRadio"
215                                                   value="Small"><label for="rb3b">3</label>
216                                </fieldset>
217                        </div>
218                        <div>
219                                <label>Slider</label>
220                                <fieldset><input id="shb" name="shb" data-dojo-type="dojox/mobile/Slider" value="0" min="0" max="20"
221                                                                 step="0.1" type="range" style="width:150px;"></fieldset>
222                        </div>
223                        <div>
224                                <label>ComboBox</label>
225                                <fieldset><input type="text" data-dojo-type="dojox/mobile/ComboBox"
226                                                                 data-dojo-props='value:"", list:"states"'></fieldset>
227                        </div>
228                        <div>
229                                <label>TextArea</span></label>
230                                <fieldset>
231                                        <textarea data-dojo-type="dojox/mobile/TextArea" style="margin-right: 0" rows="3"
232                                                          cols="20">TextArea</textarea><br>
233                                        <textarea data-dojo-type="dojox/mobile/ExpandingTextArea" rows="3"
234                                                          cols="20">ExpandingTextArea</textarea>
235                                </fieldset>
236                        </div>
237                        <div>
238                                <label>TextBox</label>
239                                <fieldset><input type="text" data-dojo-type="dojox/mobile/TextBox" intermediateChanges="true"
240                                                                 maxLength="9" selectOnClick="true" placeHolder="max 9 chars"
241                                                                 onChange="console.log('onChange fired with ' + arguments[0])"></fieldset>
242                        </div>
243                        <div>
244                                <label>SearchBox</span></label>
245                                <fieldset><input data-dojo-type="dojox/mobile/SearchBox" type="search" selectOnClick="true"
246                                                                 placeHolder="Search" data-dojo-props='list:"states", pageSize:5, onSearch:myOnSearch'>
247                                </fieldset>
248                        </div>
249                </div>
250        </div>
251</div>
252</body>
253</html>
Note: See TracBrowser for help on using the repository browser.