11<!doctype html>
2- < html lang =" en " >
2+ < html >
33< head >
44 < meta charset ="utf-8 ">
5- < title > jQuery UI Selectmenu - Disabled & empty elements functionality </ title >
5+ < title > Selectmenu Visual Test: Default </ title >
66 < link rel ="stylesheet " href ="../../../themes/base/jquery.ui.all.css ">
7- < script src ="../../jquery-1.9.1.js "> </ script >
7+ < script src ="../../../ jquery-1.9.1.js "> </ script >
88 < script src ="../../../ui/jquery.ui.core.js "> </ script >
99 < script src ="../../../ui/jquery.ui.widget.js "> </ script >
1010 < script src ="../../../ui/jquery.ui.position.js "> </ script >
1111 < script src ="../../../ui/jquery.ui.menu.js "> </ script >
1212 < script src ="../../../ui/jquery.ui.selectmenu.js "> </ script >
13- < link rel ="stylesheet " href ="../../../demos/demos.css ">
1413 < script >
1514 $ ( function ( ) {
15+ var log = $ ( "#log" ) ,
16+ index = 0 ,
17+ text ;
18+
19+ function logger ( event , ui ) {
20+ text = "#" + index ++ + " " + event . type . replace ( "selectmenu" , "" ) ;
21+ if ( ui . item ) {
22+ text += ": " + ui . item . index + " => " + ui . item . label ;
23+ }
24+ $ ( "<p>" ) . text ( text ) . prependTo ( "#log" ) ;
25+ }
26+
27+ /* events */
28+ var eventsSelectmenu = $ ( '#control select' ) . selectmenu ( {
29+ open : logger ,
30+ close : logger ,
31+ focus : logger ,
32+ select : logger ,
33+ change : logger
34+ } ) ;
35+ eventsSelectmenu . show ( ) ;
36+
37+ $ ( "#destroy" ) . click ( function ( ) {
38+ eventsSelectmenu . selectmenu ( "destroy" ) ;
39+ return false ;
40+ } ) ;
41+
42+ $ ( "#refresh_add" ) . click ( function ( ) {
43+ eventsSelectmenu . append ( '<option value="fastsound">Speed of light</option>' ) ;
44+ eventsSelectmenu . selectmenu ( "refresh" ) ;
45+ return false ;
46+ } ) ;
47+
48+ $ ( "#refresh_selected" ) . click ( function ( ) {
49+ eventsSelectmenu [ 0 ] . selectedIndex = 0 ;
50+ eventsSelectmenu . selectmenu ( "refresh" ) ;
51+ return false ;
52+ } ) ;
53+
54+ $ ( "#refresh" ) . click ( function ( ) {
55+ eventsSelectmenu . selectmenu ( "refresh" ) ;
56+ return false ;
57+ } ) ;
58+
59+ $ ( "#open" ) . click ( function ( ) {
60+ eventsSelectmenu . selectmenu ( "open" ) ;
61+ return false ;
62+ } ) ;
63+
64+ $ ( "#close" ) . click ( function ( ) {
65+ eventsSelectmenu . selectmenu ( "close" ) ;
66+ return false ;
67+ } ) ;
68+
1669 /* disabled */
17- $ ( 'select#disabled1' ) . selectmenu ( ) ;
18- var withOverflow = $ ( 'select#disabled2' ) . selectmenu ( ) ;
19- withOverflow . selectmenu ( "menuWidget" ) . addClass ( "overflow" ) ;
20-
21- $ ( 'select#disabled3' ) . selectmenu ( ) ;
22- var disabled4 = $ ( 'select#disabled4' ) . selectmenu ( ) ;
70+ $ ( '#disabled1, #disabled2, #disabled3' ) . selectmenu ( ) ;
71+ var disabled4 = $ ( '#disabled4' ) . selectmenu ( ) ;
2372
2473 $ ( "#disable_select" ) . on ( "click" , function ( ) {
2574 if ( disable_select ) {
2877 } else {
2978 disable_select = true ;
3079 disabled4 . removeAttr ( "disabled" ) ;
31- }
80+ }
3281 disabled4 . selectmenu ( "refresh" ) ;
3382 return false ;
3483 } ) ;
84+
3585 $ ( "#disable_option" ) . on ( "click" , function ( ) {
3686 if ( disable_option ) {
3787 disable_option = false ;
3888 disabled4 . find ( "option:eq(0)" ) . attr ( "disabled" , "disabled" ) ;
3989 } else {
4090 disable_option = true ;
4191 disabled4 . find ( "option:eq(0)" ) . removeAttr ( "disabled" ) ;
42- }
92+ }
4393 disabled4 . selectmenu ( "refresh" ) ;
4494 return false ;
4595 } ) ;
96+
4697 $ ( "#disable_optgroup" ) . on ( "click" , function ( ) {
4798 if ( disable_optgroup ) {
4899 disable_optgroup = false ;
49100 disabled4 . find ( "optgroup:eq(0)" ) . attr ( "disabled" , "disabled" ) ;
50101 } else {
51102 disable_optgroup = true ;
52103 disabled4 . find ( "optgroup:eq(0)" ) . removeAttr ( "disabled" ) ;
53- }
104+ }
54105 disabled4 . selectmenu ( "refresh" ) ;
55106 return false ;
56107 } ) ;
60111 } ) ;
61112 </ script >
62113 < style >
114+ body { font-size : 62.5% ; }
63115 fieldset { border : 0 ; }
64116 label { display : block; }
65117 select { width : 200px ; }
66- .overflow { height : 200px ; }
118+
119+ .ui-selectmenu-button { display : block; margin-bottom : 1em ;}
67120 </ style >
68121</ head >
69122< body >
70123
71- < div class ="demo ">
124+ < div id ="control ">
125+ < h2 > Event logging tests</ h2 >
126+ < form action ="# ">
127+ < button id ="open "> Open</ button >
128+ < button id ="close "> Close</ button >
129+ < button id ="refresh_add "> Add item</ button >
130+ < button id ="refresh_selected "> Change to first item</ button >
131+ < button id ="refresh "> Refresh</ button >
132+ < button id ="destroy "> Destroy</ button >
133+ < fieldset >
134+ < select >
135+ < option value ="Slower "> Slower</ option >
136+ < option value ="Slow "> Slow</ option >
137+ < option value ="Medium " selected ="selected "> Medium</ option >
138+ < option value ="Fast "> Fast</ option >
139+ < option value ="Faster "> Faster</ option >
140+ </ select >
141+ </ fieldset >
142+ </ form >
143+ </ div >
72144
73145< form action ="# ">
74146 < h2 > Disabled tests</ h2 >
@@ -81,8 +153,7 @@ <h2>Disabled tests</h2>
81153 < option value ="Fast "> Fast</ option >
82154 < option value ="Faster "> Faster</ option >
83155 </ select >
84- < br />
85- < br />
156+
86157 < label for ="disabled2 "> Disabled options</ label >
87158 < select name ="disabled2 " id ="disabled2 ">
88159 < option value ="1 "> 1</ option >
@@ -105,8 +176,7 @@ <h2>Disabled tests</h2>
105176 < option value ="18 "> 18</ option >
106177 < option value ="19 "> 19</ option >
107178 </ select >
108- < br />
109- < br />
179+
110180 < label for ="disabled3 "> Disabled optgroup</ label >
111181 < select name ="disabled3 " id ="disabled3 ">
112182 < optgroup disabled ="disabled " label ="Scripts ">
@@ -118,8 +188,7 @@ <h2>Disabled tests</h2>
118188 < option value ="someotherfile "> Some other file</ option >
119189 </ optgroup >
120190 </ select >
121- < br />
122- < br />
191+
123192 < label for ="disabled4 "> Disable specific element and refresh selectmenu on button click</ label >
124193 < select name ="disabled4 " id ="disabled4 ">
125194 < optgroup label ="Scripts ">
@@ -135,19 +204,17 @@ <h2>Disabled tests</h2>
135204 < button id ="disable_option "> Toggle disable option</ button >
136205 < button id ="disable_optgroup "> Toggle disable optgroup</ button >
137206 </ fieldset >
138- < br />
207+
139208 < h2 > Empty tests</ h2 >
140209 < fieldset class ="empty ">
141210 < label for ="empty1 "> Select with no option elements</ label >
142211 < select name ="empty1 " id ="empty1 "> </ select >
143- < br />
144- < br />
212+
145213 < label for ="empty2 "> Select with one empty option element</ label >
146214 < select name ="empty2 " id ="empty2 ">
147215 < option value =""> </ option >
148216 </ select >
149- < br />
150- < br />
217+
151218 < label for ="empty3 "> Select with some empty option elements</ label >
152219 < select name ="empty3 " id ="empty3 ">
153220 < option value ="1 "> 1</ option >
@@ -160,8 +227,7 @@ <h2>Empty tests</h2>
160227 < option value =""> </ option >
161228 < option value ="9 "> 9</ option >
162229 </ select >
163- < br />
164- < br />
230+
165231 < label for ="empty4 "> Select with empty optgroup</ label >
166232 < select name ="empty4 " class ="empty4 ">
167233 < optgroup label ="Scripts "> </ optgroup >
@@ -172,11 +238,11 @@ <h2>Empty tests</h2>
172238 </ select >
173239 </ fieldset >
174240</ form >
175- < br />
176-
177- </ div > <!-- End demo -->
178-
179241
242+ < div style ="position: absolute; top: 1em; right: 1em; ">
243+ Log:
244+ < div id ="log " style ="height: 400px; width: 300px; overflow: auto; border: 1px solid #000; "> </ div >
245+ </ div >
180246
181247</ body >
182248</ html >
0 commit comments