library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Selectmenu: improved disabled implementation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/selectmenu/default.html
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>

82
ui/jquery.ui.selectmenu.js vendored
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,40 +210,43 @@ $.widget( "ui.selectmenu", {
options = this.options, options = this.options,
currentItem = self._getSelectedItem(); currentItem = self._getSelectedItem();
// close all other selectmenus if ( !options.disabled ) {
$( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
$( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
});
if ( options.dropdown ) { // close all other selectmenus
self.newelement $( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
.addClass( 'ui-corner-top' ) $( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
.removeClass( 'ui-corner-all' );
}
self.listWrap.addClass( self.widgetBaseClass + '-open' );
self.list.focus().menu( "focus", null, currentItem );
if ( !options.dropdown ) {
// center current item
if ( self.list.css("overflow") == "auto" ) {
self.list.scrollTop( self.list.scrollTop() + currentItem.position().top - self.list.outerHeight()/2 + currentItem.outerHeight()/2 );
}
// calculate offset
var _offset = (self.list.offset().top - currentItem.offset().top + (self.newelement.outerHeight() - currentItem.outerHeight()) / 2);
$.extend( options.position, {
my: "left top",
at: "left top",
offset: "0 " + _offset
}); });
if ( options.dropdown ) {
self.newelement
.addClass( 'ui-corner-top' )
.removeClass( 'ui-corner-all' );
}
self.listWrap.addClass( self.widgetBaseClass + '-open' );
self.list.focus().menu( "focus", null, currentItem );
if ( !options.dropdown ) {
// center current item
if ( self.list.css("overflow") == "auto" ) {
self.list.scrollTop( self.list.scrollTop() + currentItem.position().top - self.list.outerHeight()/2 + currentItem.outerHeight()/2 );
}
// calculate offset
var _offset = (self.list.offset().top - currentItem.offset().top + (self.newelement.outerHeight() - currentItem.outerHeight()) / 2);
$.extend( options.position, {
my: "left top",
at: "left top",
offset: "0 " + _offset
});
}
self.listWrap.position( $.extend({
of: this.newelementWrap
}, options.position ));
this.opened = true;
self._trigger( "open", event );
} }
self.listWrap.position( $.extend({
of: this.newelementWrap
}, options.position ));
this.opened = true;
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() {