corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
Rev Author Line No. Line
62 office 1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Selectmenu Visual Test: Default</title>
6 <link rel="stylesheet" href="../../../themes/base/all.css">
7 <style>
8 fieldset { border: 0; }
9 label { display: block; }
10 select { width: 200px; }
11  
12 .ui-selectmenu-button { display: block; margin-bottom: 1em;}
13  
14 /* width */
15 .width-menu { width: 196px; }
16 </style>
17 <script src="../../../external/requirejs/require.js"></script>
18 <script src="../../../demos/bootstrap.js">
19 var log = $("#log"),
20 index = 0,
21 text;
22  
23 function logger( event, ui ) {
24 text = "#" + index++ + " " + event.type.replace("selectmenu","");
25 if ( ui.item ) {
26 text += ": " + ui.item.index + " => " + ui.item.label;
27 }
28 $( "<p>" ).text( text ).prependTo( "#log" );
29 }
30  
31 /* events */
32 var eventsSelectmenu = $('#control select').selectmenu({
33 open: logger,
34 close: logger,
35 focus : logger,
36 select: logger,
37 change: logger
38 });
39 eventsSelectmenu.show();
40  
41 $("#destroy").on( "click", function() {
42 eventsSelectmenu.selectmenu("destroy");
43 return false;
44 });
45  
46 $("#refresh_add").on( "click", function() {
47 eventsSelectmenu.append('<option value="fastsound">Speed of light</option>');
48 eventsSelectmenu.selectmenu("refresh");
49 return false;
50 });
51  
52 $("#refresh_selected").on( "click", function() {
53 eventsSelectmenu[0].selectedIndex = 0;
54 eventsSelectmenu.selectmenu("refresh");
55 return false;
56 });
57  
58 $("#refresh").on( "click", function() {
59 eventsSelectmenu.selectmenu("refresh");
60 return false;
61 });
62  
63 $("#open").on( "click", function() {
64 eventsSelectmenu.selectmenu("open");
65 return false;
66 });
67  
68 $("#close").on( "click", function() {
69 eventsSelectmenu.selectmenu("close");
70 return false;
71 });
72  
73 /* disabled */
74 $('#disabled1, #disabled2, #disabled3').selectmenu();
75 var disabled4 = $('#disabled4').selectmenu();
76  
77 $("#disable_select").on("click", function() {
78 if (disable_select) {
79 disable_select = false;
80 disabled4.selectmenu("disable");
81 } else {
82 disable_select = true;
83 disabled4.removeAttr("disabled");
84 }
85 disabled4.selectmenu("refresh");
86 return false;
87 });
88  
89 $("#disable_option").on("click", function() {
90 if (disable_option) {
91 disable_option = false;
92 disabled4.find("option:eq(0)").attr("disabled", "disabled");
93 } else {
94 disable_option = true;
95 disabled4.find("option:eq(0)").removeAttr("disabled");
96 }
97 disabled4.selectmenu("refresh");
98 return false;
99 });
100  
101 $("#disable_optgroup").on("click", function() {
102 if (disable_optgroup) {
103 disable_optgroup = false;
104 disabled4.find("optgroup:eq(0)").attr("disabled", "disabled");
105 } else {
106 disable_optgroup = true;
107 disabled4.find("optgroup:eq(0)").removeAttr("disabled");
108 }
109 disabled4.selectmenu("refresh");
110 return false;
111 });
112  
113 /* empty */
114 $(".empty select").selectmenu();
115  
116 /* width */
117 $("#width_auto1, #width_auto2").selectmenu();
118  
119 $("#width_js1, #width_js2").selectmenu({
120 width: 200
121 });
122  
123 var widthMenu = $("#width_menu").selectmenu();
124 widthMenu.selectmenu("menuWidget").addClass("width-menu");
125  
126 </script>
127 </head>
128 <body>
129  
130 <div id="control">
131 <h2>Event logging tests</h2>
132 <form action="#">
133 <button id="open">Open</button>
134 <button id="close">Close</button>
135 <button id="refresh_add">Add item</button>
136 <button id="refresh_selected">Change to first item</button>
137 <button id="refresh">Refresh</button>
138 <button id="destroy">Destroy</button>
139 <fieldset>
140 <select>
141 <option value="Slower">Slower</option>
142 <option value="Slow">Slow</option>
143 <option value="Medium" selected="selected">Medium</option>
144 <option value="Fast">Fast</option>
145 <option value="Faster">Faster</option>
146 </select>
147 </fieldset>
148 </form>
149 </div>
150  
151 <form action="#">
152 <h2>Disabled tests</h2>
153 <fieldset>
154 <label for="disabled1">Disabled select</label>
155 <select disabled="disabled" name="disabled1" id="disabled1">
156 <option value="Slower">Slower</option>
157 <option value="Slow">Slow</option>
158 <option value="Medium" selected="selected">Medium</option>
159 <option value="Fast">Fast</option>
160 <option value="Faster">Faster</option>
161 </select>
162  
163 <label for="disabled2">Disabled options</label>
164 <select name="disabled2" id="disabled2">
165 <option value="1" disabled="disabled">1</option>
166 <option value="2" selected="selected">2</option>
167 <option value="3">3</option>
168 <option disabled="disabled" value="4">4</option>
169 <option value="5">5</option>
170 <option value="6">6</option>
171 <option value="7">7</option>
172 <option disabled="disabled" value="8">8</option>
173 <option value="9">9</option>
174 <option value="10">10</option>
175 <option disabled="disabled" value="11">11</option>
176 <option value="12">12</option>
177 <option value="13">13</option>
178 <option disabled="disabled" value="14">14</option>
179 <option disabled="disabled" value="15">15</option>
180 <option value="16">16</option>
181 <option value="17">17</option>
182 <option value="18">18</option>
183 <option value="19">19</option>
184 </select>
185  
186 <label for="disabled3">Disabled optgroup</label>
187 <select name="disabled3" id="disabled3">
188 <optgroup disabled="disabled" label="Scripts">
189 <option value="jquery">jQuery.js</option>
190 <option value="jqueryui">ui.jQuery.js</option>
191 </optgroup>
192 <optgroup label="Other files">
193 <option value="somefile">Some unknown file</option>
194 <option value="someotherfile">Some other file</option>
195 </optgroup>
196 </select>
197  
198 <label for="disabled4">Disable specific element and refresh selectmenu on button click</label>
199 <select name="disabled4" id="disabled4">
200 <optgroup label="Scripts">
201 <option value="jquery">jQuery.js</option>
202 <option value="jqueryui">ui.jQuery.js</option>
203 </optgroup>
204 <optgroup label="Other files">
205 <option value="somefile">Some unknown file</option>
206 <option value="someotherfile">Some other file</option>
207 </optgroup>
208 </select>
209 <button id="disable_select">Toggle disable select</button>
210 <button id="disable_option">Toggle disable option</button>
211 <button id="disable_optgroup">Toggle disable optgroup</button>
212 </fieldset>
213  
214 <h2>Empty tests</h2>
215 <fieldset class="empty">
216 <label for="empty1">Select with no option elements</label>
217 <select name="empty1" id="empty1"></select>
218  
219 <label for="empty2">Select with one empty option element</label>
220 <select name="empty2" id="empty2">
221 <option value="" label="empty"></option>
222 </select>
223  
224 <label for="empty3">Select with some empty option elements</label>
225 <select name="empty3" id="empty3">
226 <option value="1">1</option>
227 <option value="2" selected="selected">2</option>
228 <option value="3">3</option>
229 <option value="4">4</option>
230 <option value="" label="empty"></option>
231 <option value="6">6</option>
232 <option value="7">7</option>
233 <option value="" label="empty"></option>
234 <option value="9">9</option>
235 </select>
236  
237 <label for="empty4">Select with empty optgroup</label>
238 <select id="empty4" name="empty4" class="empty4">
239 <optgroup label="Scripts"></optgroup>
240 <optgroup label="Other files">
241 <option value="somefile">Some unknown file</option>
242 <option value="someotherfile">Some other file</option>
243 </optgroup>
244 </select>
245 </fieldset>
246  
247 <h2>Width tests</h2>
248 <fieldset>
249 <label for="width_auto1">Width auto</label>
250 <select name="width_auto1" id="width_auto1" style="width: auto;">
251 <option>Width test 1</option>
252 <option>Width test 2</option>
253 <option>Width test 3</option>
254 </select>
255  
256 <label for="width_auto2">Width auto with long option</label>
257 <select name="width_auto2" id="width_auto2" style="width: auto;">
258 <option>Width test 1</option>
259 <option>Width test 2</option>
260 <option>Width test 3 Width test 3 Width test 3</option>
261 </select>
262  
263 <label for="width_js1">Width set by JS</label>
264 <select name="width_js1" id="width_js1">
265 <option>Width test 1</option>
266 <option>Width test 2</option>
267 <option>Width test 3</option>
268 </select>
269  
270 <label for="width_js2">Width set by JS with long option</label>
271 <select name="width_js2" id="width_js2">
272 <option>Width test 1</option>
273 <option>Width test 2</option>
274 <option>Width test 3 Width test 3 Width test 3</option>
275 </select>
276  
277 <label for="width_menu">Width set by JS with long option</label>
278 <select name="width_menu" id="width_menu">
279 <option>Width test 1</option>
280 <option>Width test 2</option>
281 <option>Width test 3 Width test 3 Width test 3</option>
282 </select>
283 </fieldset>
284 </form>
285  
286 <div style="position: absolute; top: 1em; right: 1em;">
287 Log:
288 <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>
289 </div>
290  
291 </body>
292 </html>