Skip to content
Browse files

Selectmenu: implemented disable for option and optgroup, code cleanup

  • Loading branch information...
1 parent 1d9fac5 commit 35289489c4e6272fb6396e89f08a948df506099e @fnagel fnagel committed Sep 24, 2011
Showing with 34 additions and 37 deletions.
  1. +5 −5 demos/selectmenu/default.html
  2. +1 −0 themes/base/jquery.ui.selectmenu.css
  3. +28 −32 ui/jquery.ui.selectmenu.js
View
10 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>
View
1 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; }
View
60 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;
- }
}
});

0 comments on commit 3528948

Please sign in to comment.
Something went wrong with that request. Please try again.