Selectmenu: improved disabled implementation

This commit is contained in:
Felix Nagel 2011-09-24 05:29:05 +02:00
parent d2a6eadde0
commit 17c8ec587d
2 changed files with 54 additions and 36 deletions

View File

@ -38,10 +38,10 @@
<form action="#"> <form action="#">
<fieldset> <fieldset>
<label for="speedA">Select a Speed:</label> <label for="speedA">Select a Speed:</label>
<select name="speedA" id="speedA"> <select disabled="disabled" name="speedA" id="speedA">
<option value="Slower">Slower</option> <option value="Slower">Slower</option>
<option value="Slow">Slow</option> <option value="Slow">Slow</option>
<option disabled="disabled" value="Medium" selected="selected">Medium</option> <option value="Medium" selected="selected">Medium</option>
<option value="Fast">Fast</option> <option value="Fast">Fast</option>
<option value="Faster">Faster</option> <option value="Faster">Faster</option>
</select> </select>

View File

@ -52,8 +52,9 @@ $.widget( "ui.selectmenu", {
// get options // get options
self.items = self.element.find( 'option' ); self.items = self.element.find( 'option' );
// set options value // set options
options.value = self.element[0].value; options.value = self.element[0].value;
options.disabled = ( self.element.attr( 'disabled' ) ) ? true : false;
// catch click event of the label // catch click event of the label
self.element.bind( 'click.selectmenu', function() { self.element.bind( 'click.selectmenu', function() {
@ -70,6 +71,7 @@ $.widget( "ui.selectmenu", {
css: { css: {
width: self.element.width() width: self.element.width()
}, },
'aria-disabled': options.disabled,
'aria-owns': self.ids[ 1 ], 'aria-owns': self.ids[ 1 ],
'aria-haspopup': true 'aria-haspopup': true
}) })
@ -81,6 +83,7 @@ $.widget( "ui.selectmenu", {
} }
}); });
self.newelementWrap = $( options.wrapperElement ) self.newelementWrap = $( options.wrapperElement )
.append( self.newelement ) .append( self.newelement )
.insertAfter( self.element ); .insertAfter( self.element );
@ -132,6 +135,13 @@ $.widget( "ui.selectmenu", {
// built menu // built menu
self.refresh(); self.refresh();
// transfer disabled state
if ( self.element.attr( 'disabled' ) ) {
self.disable();
} else {
self.enable()
}
// document click closes menu // document click closes menu
$( document ).bind( 'mousedown.selectmenu', function( event ) { $( document ).bind( 'mousedown.selectmenu', function( event ) {
if ( self.opened && !self.hover) { if ( self.opened && !self.hover) {
@ -200,6 +210,8 @@ $.widget( "ui.selectmenu", {
options = this.options, options = this.options,
currentItem = self._getSelectedItem(); currentItem = self._getSelectedItem();
if ( !options.disabled ) {
// close all other selectmenus // close all other selectmenus
$( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() { $( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
$( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' ); $( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
@ -234,6 +246,7 @@ $.widget( "ui.selectmenu", {
this.opened = true; this.opened = true;
self._trigger( "open", event ); self._trigger( "open", event );
}
}, },
close: function( event, focus ) { close: function( event, focus ) {
@ -319,6 +332,11 @@ $.widget( "ui.selectmenu", {
if ( key === "value" && value) { if ( key === "value" && value) {
this.element[0].value = value; this.element[0].value = value;
} }
if ( key === "disabled" ) {
this.newelement.button( "option", "disabled", value );
this.list.attr( "aria-disabled", value );
this.close();
}
}, },
_initSource: function() { _initSource: function() {