diff options
| -rw-r--r-- | tests/unit/selectmenu/selectmenu_core.js | 34 | ||||
| -rw-r--r-- | ui/selectmenu.js | 55 |
2 files changed, 71 insertions, 18 deletions
diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js index 0074c6f90..2ee963043 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -45,6 +45,40 @@ asyncTest( "accessibility", function() { }); +test( "_renderButtonItem()", function() { + expect( 2 ); + + var option, + element = $( "#speed" ).selectmenu(), + instance = element.selectmenu( "instance" ), + button = element.selectmenu( "widget" ), + menu = element.selectmenu( "menuWidget" ); + + instance._renderButtonItem = function( item ) { + var buttonItem = $( "<span>" ); + this._setText( buttonItem, item.label + item.index ); + + return buttonItem; + }; + + element.selectmenu( "refresh" ); + option = element.find( "option:selected" ); + equal( + option.text() + element[ 0 ].selectedIndex, + button.text(), + "refresh: button item text" + ); + + button.trigger( "click" ); + menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" ); + option = element.find( "option" ).last(); + equal( + option.text() + element[ 0 ].selectedIndex, + button.text(), + "click: button item text" + ); +}); + $.each([ { type: "default", diff --git a/ui/selectmenu.js b/ui/selectmenu.js index fb9428d86..6a9607b61 100644 --- a/ui/selectmenu.js +++ b/ui/selectmenu.js @@ -67,7 +67,11 @@ return $.widget( "ui.selectmenu", { }, _drawButton: function() { - var that = this; + var that = this, + item = this._parseOption( + this.element.find( "option:selected" ), + this.element[ 0 ].selectedIndex + ); // Associate existing label with the new button this.label = $( "label[for='" + this.ids.element + "']" ).attr( "for", this.ids.button ); @@ -99,12 +103,9 @@ return $.widget( "ui.selectmenu", { }) .prependTo( this.button ); - this.buttonText = $( "<span>", { - "class": "ui-selectmenu-text" - }) + this.buttonItem = this._renderButtonItem( item ) .appendTo( this.button ); - this._setText( this.buttonText, this.element.find( "option:selected" ).text() ); this._resizeButton(); this._on( this.button, this._buttonEvents ); @@ -190,7 +191,11 @@ return $.widget( "ui.selectmenu", { refresh: function() { this._refreshMenu(); - this._setText( this.buttonText, this._getSelectedItem().text() ); + this.buttonItem.replaceWith( + this.buttonItem = this._renderButtonItem( + this._getSelectedItem().data( "ui-selectmenu-item" ) + ) + ); if ( !this.options.width ) { this._resizeButton(); } @@ -275,6 +280,15 @@ return $.widget( "ui.selectmenu", { return this.menu; }, + _renderButtonItem: function( item ) { + var buttonItem = $( "<span>", { + "class": "ui-selectmenu-text" + }); + this._setText( buttonItem, item.label ); + + return buttonItem; + }, + _renderMenu: function( ul, items ) { var that = this, currentOptgroup = ""; @@ -480,7 +494,7 @@ return $.widget( "ui.selectmenu", { // Change native select element this.element[ 0 ].selectedIndex = item.index; - this._setText( this.buttonText, item.label ); + this.buttonItem.replaceWith( this.buttonItem = this._renderButtonItem( item ) ); this._setAria( item ); this._trigger( "select", event, { item: item } ); @@ -590,22 +604,27 @@ return $.widget( "ui.selectmenu", { }, _parseOptions: function( options ) { - var data = []; + var that = this, + data = []; options.each(function( index, item ) { - var option = $( item ), - optgroup = option.parent( "optgroup" ); - data.push({ - element: option, - index: index, - value: option.attr( "value" ), - label: option.text(), - optgroup: optgroup.attr( "label" ) || "", - disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ) - }); + data.push( that._parseOption( $( item ), index ) ); }); this.items = data; }, + _parseOption: function( option, index ) { + var optgroup = option.parent( "optgroup" ); + + return { + element: option, + index: index, + value: option.attr( "value" ), + label: option.text(), + optgroup: optgroup.attr( "label" ) || "", + disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" ) + }; + }, + _destroy: function() { this.menuWrap.remove(); this.button.remove(); |