@@ -31,6 +31,15 @@ return $.widget( "ui.selectmenu", {
31
31
defaultElement : "<select>" ,
32
32
options : {
33
33
appendTo : null ,
34
+ classes : {
35
+ "ui-selectmenu-button" : "" ,
36
+ "ui-selectmenu-button-open" : "ui-corner-top" ,
37
+ "ui-selectmenu-button-closed" : "ui-corner-all" ,
38
+ "ui-selectmenu-text" : "" ,
39
+ "ui-selectmenu-menu" : "" ,
40
+ "ui-selectmenu-optgroup" : "" ,
41
+ "ui-selectmenu-open" : ""
42
+ } ,
34
43
disabled : null ,
35
44
icons : {
36
45
button : "ui-icon-triangle-1-s"
@@ -87,7 +96,6 @@ return $.widget( "ui.selectmenu", {
87
96
88
97
// Create button
89
98
this . button = $ ( "<span>" , {
90
- "class" : "ui-selectmenu-button ui-widget ui-state-default ui-corner-all" ,
91
99
tabindex : this . options . disabled ? - 1 : 0 ,
92
100
id : this . ids . button ,
93
101
role : "combobox" ,
@@ -99,6 +107,9 @@ return $.widget( "ui.selectmenu", {
99
107
} )
100
108
. insertAfter ( this . element ) ;
101
109
110
+ this . _addClass ( this . button , "ui-selectmenu-button ui-selectmenu-button-closed" ,
111
+ "ui-widget ui-state-default" ) ;
112
+
102
113
$ ( "<span>" , {
103
114
"class" : "ui-icon " + this . options . icons . button
104
115
} )
@@ -107,6 +118,8 @@ return $.widget( "ui.selectmenu", {
107
118
this . buttonItem = this . _renderButtonItem ( item )
108
119
. appendTo ( this . button ) ;
109
120
121
+ this . _addClass ( this . buttonItem , "ui-selectmenu-text" ) ;
122
+
110
123
this . _resizeButton ( ) ;
111
124
112
125
this . _on ( this . button , this . _buttonEvents ) ;
@@ -139,9 +152,14 @@ return $.widget( "ui.selectmenu", {
139
152
. append ( this . menu )
140
153
. appendTo ( this . _appendTo ( ) ) ;
141
154
155
+ this . _addClass ( this . menuWrap , "ui-selectmenu-menu" , "ui-front" ) ;
156
+
142
157
// Initialize menu widget
143
158
this . menuInstance = this . menu
144
159
. menu ( {
160
+ classes : {
161
+ "ui-menu" : "ui-corner-bottom"
162
+ } ,
145
163
role : "listbox" ,
146
164
select : function ( event , ui ) {
147
165
event . preventDefault ( ) ;
@@ -171,11 +189,6 @@ return $.widget( "ui.selectmenu", {
171
189
} )
172
190
. menu ( "instance" ) ;
173
191
174
- // Adjust menu styles to dropdown
175
- this . menu
176
- . addClass ( "ui-corner-bottom" )
177
- . removeClass ( "ui-corner-all" ) ;
178
-
179
192
// Don't close the menu on mouseleave
180
193
this . menuInstance . _off ( this . menu , "mouseleave" ) ;
181
194
@@ -197,6 +210,7 @@ return $.widget( "ui.selectmenu", {
197
210
this . _getSelectedItem ( ) . data ( "ui-selectmenu-item" )
198
211
)
199
212
) ;
213
+ this . _addClass ( this . buttonItem , "ui-selectmenu-text" ) ;
200
214
if ( ! this . options . width ) {
201
215
this . _resizeButton ( ) ;
202
216
}
@@ -282,9 +296,8 @@ return $.widget( "ui.selectmenu", {
282
296
} ,
283
297
284
298
_renderButtonItem : function ( item ) {
285
- var buttonItem = $ ( "<span>" , {
286
- "class" : "ui-selectmenu-text"
287
- } ) ;
299
+ var buttonItem = $ ( "<span>" ) ;
300
+
288
301
this . _setText ( buttonItem , item . label ) ;
289
302
290
303
return buttonItem ;
@@ -296,14 +309,13 @@ return $.widget( "ui.selectmenu", {
296
309
297
310
$ . each ( items , function ( index , item ) {
298
311
if ( item . optgroup !== currentOptgroup ) {
299
- $ ( "<li>" , {
300
- "class" : "ui-selectmenu-optgroup ui-menu-divider" +
301
- ( item . element . parent ( "optgroup" ) . prop ( "disabled" ) ?
302
- " ui-state-disabled" :
303
- "" ) ,
312
+ var li = $ ( "<li>" , {
304
313
text : item . optgroup
305
- } )
306
- . appendTo ( ul ) ;
314
+ } ) . appendTo ( ul ) ;
315
+
316
+ that . _addClass ( li , "ui-selectmenu-optgroup" , "ui-menu-divider" +
317
+ ( item . element . parent ( "optgroup" ) . prop ( "disabled" ) ?
318
+ " ui-state-disabled" : "" ) ) ;
307
319
308
320
currentOptgroup = item . optgroup ;
309
321
}
@@ -498,6 +510,7 @@ return $.widget( "ui.selectmenu", {
498
510
// Change native select element
499
511
this . element [ 0 ] . selectedIndex = item . index ;
500
512
this . buttonItem . replaceWith ( this . buttonItem = this . _renderButtonItem ( item ) ) ;
513
+ this . _addClass ( this . buttonItem , "ui-selectmenu-text" ) ;
501
514
this . _setAria ( item ) ;
502
515
this . _trigger ( "select" , event , { item : item } ) ;
503
516
@@ -576,7 +589,14 @@ return $.widget( "ui.selectmenu", {
576
589
. toggleClass ( "ui-corner-top" , this . isOpen )
577
590
. toggleClass ( "ui-corner-all" , ! this . isOpen )
578
591
. attr ( "aria-expanded" , this . isOpen ) ;
579
- this . menuWrap . toggleClass ( "ui-selectmenu-open" , this . isOpen ) ;
592
+
593
+ this [ ( ! this . isOpen ? "_add" : "_remove" ) + "Class" ]
594
+ ( this . button , "ui-selectmenu-button-closed" ) ;
595
+ this [ ( this . isOpen ? "_add" : "_remove" ) + "Class" ]
596
+ ( this . button , "ui-selectmenu-button-open" ) ;
597
+ this [ ( this . isOpen ? "_add" : "_remove" ) + "Class" ]
598
+ ( this . menuWrap , "ui-selectmenu-open" ) ;
599
+
580
600
this . menu . attr ( "aria-hidden" , ! this . isOpen ) ;
581
601
} ,
582
602
0 commit comments