corrade-http-templates – Blame information for rev 62
?pathlinks?
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> |