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

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

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