diff options
| -rw-r--r-- | demos/selectmenu/default.html | 10 | ||||
| -rw-r--r-- | themes/base/jquery.ui.selectmenu.css | 1 | ||||
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 60 |
3 files changed, 34 insertions, 37 deletions
diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index cbeb62710..c4393b570 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -41,7 +41,7 @@ <select name="speedA" id="speedA"> <option value="Slower">Slower</option> <option value="Slow">Slow</option> - <option value="Medium" selected="selected">Medium</option> + <option disabled="disabled" value="Medium" selected="selected">Medium</option> <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select> @@ -60,8 +60,8 @@ <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> - <option value="11">11</option> - <option value="12">12</option> + <option disabled="disabled" value="11">11</option> + <option disabled="disabled" value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> @@ -75,12 +75,12 @@ <br /> <label for="filesC">Select a file:</label> <select name="filesC" id="filesC"> - <optgroup label="scripts"> + <optgroup disabled="disabled" label="scripts"> <option value="jquery">jQuery.js</option> <option value="jqueryui">ui.jQuery.js</option> </optgroup> <optgroup label="Label with space"> - <option value="somefile">Some unknown file</option> + <option disabled="disabled" value="somefile">Some unknown file</option> <option value="someotherfile">Some other file</option> </optgroup> </select> diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css index 2f532d5ee..d2353e882 100644 --- a/themes/base/jquery.ui.selectmenu.css +++ b/themes/base/jquery.ui.selectmenu.css @@ -12,6 +12,7 @@ .ui-selectmenu-menu .ui-menu { padding: 0; } .ui-selectmenu-menu .ui-menu .ui-menu-item a { padding: 0.3em 1em 0.3em 1em; } .ui-selectmenu-menu .ui-menu .ui-menu-item a.ui-state-focus { margin: -1px 0 -1px -1px; } +.ui-selectmenu-menu .ui-menu li.ui-state-disabled { margin: 0; padding: 0; } .ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup { font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; } .ui-selectmenu-open { display: block; } diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 4db5f6d56..22f26953e 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -74,7 +74,7 @@ $.widget( "ui.selectmenu", { }) .addClass( self.widgetBaseClass + '-button' ) .button({ - label: self.items.eq( self.element[ 0 ].selectedIndex ).text(), + label: self.items.eq( this.element[0].selectedIndex ).text(), icons: { primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' ) } @@ -128,6 +128,7 @@ $.widget( "ui.selectmenu", { return ret; }); + // built menu self.refresh(); // document click closes menu @@ -143,7 +144,8 @@ $.widget( "ui.selectmenu", { open: function( event ) { var self = this, - options = this.options; + options = this.options, + currentItem = self._getSelectedItem(); // close all other selectmenus $( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() { @@ -155,9 +157,7 @@ $.widget( "ui.selectmenu", { .addClass( 'ui-corner-top' ) .removeClass( 'ui-corner-all' ); } - - var currentItem = self._getCurrenItem(); - + self.listWrap.addClass( self.widgetBaseClass + '-open' ); self.list.focus().menu( "focus", null, currentItem ); @@ -197,7 +197,7 @@ $.widget( "ui.selectmenu", { self.listWrap = $( options.wrapperElement ) .addClass( self.widgetBaseClass + '-menu' ) - .css("width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth) + .css( "width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth ) .append( self.list ) .appendTo( options.appendTo ); @@ -208,19 +208,12 @@ $.widget( "ui.selectmenu", { .data( 'element.selectelemenu', self.element ) .menu({ select: function( event, ui ) { - var item = ui.item.data( "item.selectmenu" ); - console.log(item); - - self.newelement.children( 'span.ui-button-text' ).text( item.label ); - self._index( item.index ); + var item = ui.item.data( "item.selectmenu" ); + self._setSelected( item ); self.close( event, true); }, focus: function( event, ui ) { - var item = ui.item.data( "item.selectmenu" ); - if ( !self.opened ) { - self.newelement.children( 'span.ui-button-text' ).text( item.label ); - self._index( item.index ); - } + if ( !self.opened ) self._setSelected( ui.item.data( "item.selectmenu" ); } }) .bind( 'mouseenter.selectelemenu', function() { @@ -259,7 +252,9 @@ $.widget( "ui.selectmenu", { $.each( items, function( index, item ) { if ( item.optgroup != currentOptgroup ) { - ul.append( "<li class='ui-selectmenu-optgroup'>" + item.optgroup + "</li>" ); + var optgroup = $( '<li class="ui-selectmenu-optgroup">' + item.optgroup + '</li>' ); + if ( $( self.items[ item.index ] ).parent( "optgroup" ).attr( "disabled" ) ) optgroup.addClass( 'ui-state-disabled' ); + ul.append( optgroup ); currentOptgroup = item.optgroup; } self._renderItem( ul, item ); @@ -268,6 +263,7 @@ $.widget( "ui.selectmenu", { _renderItem: function( ul, item) { return $( "<li />" ) + .addClass( ( item.disabled ) ? 'ui-state-disabled' : '' ) .data( "item.selectmenu", item ) .append( $( "<a />", { text: item.label, @@ -280,17 +276,23 @@ $.widget( "ui.selectmenu", { }, _previous: function() { - this.list.menu( "focus", null, this._getCurrenItem() ); + this.list.menu( "focus", null, this._getSelectedItem() ); this.list.menu("previous"); }, _next: function() { - this.list.menu( "focus", null, this._getCurrenItem() ); + this.list.menu( "focus", null, this._getSelectedItem() ); this.list.menu("next"); }, - _getCurrenItem: function() { - return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this._index() ); + _getSelectedItem: function() { + return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this.element[0].selectedIndex ); + }, + + _setSelected: function( item ) { + this.newelement.children( '.ui-button-text' ).text( item.label ); + this.element[0].selectedIndex = item.index; + this.options.value = item.value; }, _toggle: function( event ) { @@ -315,28 +317,22 @@ $.widget( "ui.selectmenu", { if ( !$.isArray( this.options.source ) ) { var data = []; $.each( this.items, function( index, item ) { - var option = $( item ); + var option = $( item ), + optgroup = option.parent( "optgroup" ); data.push({ index: index, value: option.attr( 'value' ), label: option.text(), - optgroup: option.parent("optgroup").attr("label") || false + optgroup: optgroup.attr("label") || false, + disabled: optgroup.attr( "disabled" ) || option.attr( "disabled" ) }); }); + console.log( data ); this.options.source = data; } }, _destroy: function() { - }, - - _index: function( newIndex ) { - if ( arguments.length ) { - this.element[0].selectedIndex = newIndex; - self.options.value = this._getCurrenItem().attr( "value" ); - } else { - return this.element[0].selectedIndex; - } } }); |