mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Selectmenu: improved disabled implementation
This commit is contained in:
parent
d2a6eadde0
commit
17c8ec587d
@ -38,10 +38,10 @@
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<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="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="Faster">Faster</option>
|
||||
</select>
|
||||
|
82
ui/jquery.ui.selectmenu.js
vendored
82
ui/jquery.ui.selectmenu.js
vendored
@ -52,8 +52,9 @@ $.widget( "ui.selectmenu", {
|
||||
// get options
|
||||
self.items = self.element.find( 'option' );
|
||||
|
||||
// set options value
|
||||
// set options
|
||||
options.value = self.element[0].value;
|
||||
options.disabled = ( self.element.attr( 'disabled' ) ) ? true : false;
|
||||
|
||||
// catch click event of the label
|
||||
self.element.bind( 'click.selectmenu', function() {
|
||||
@ -70,6 +71,7 @@ $.widget( "ui.selectmenu", {
|
||||
css: {
|
||||
width: self.element.width()
|
||||
},
|
||||
'aria-disabled': options.disabled,
|
||||
'aria-owns': self.ids[ 1 ],
|
||||
'aria-haspopup': true
|
||||
})
|
||||
@ -81,6 +83,7 @@ $.widget( "ui.selectmenu", {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
self.newelementWrap = $( options.wrapperElement )
|
||||
.append( self.newelement )
|
||||
.insertAfter( self.element );
|
||||
@ -132,6 +135,13 @@ $.widget( "ui.selectmenu", {
|
||||
// built menu
|
||||
self.refresh();
|
||||
|
||||
// transfer disabled state
|
||||
if ( self.element.attr( 'disabled' ) ) {
|
||||
self.disable();
|
||||
} else {
|
||||
self.enable()
|
||||
}
|
||||
|
||||
// document click closes menu
|
||||
$( document ).bind( 'mousedown.selectmenu', function( event ) {
|
||||
if ( self.opened && !self.hover) {
|
||||
@ -200,40 +210,43 @@ $.widget( "ui.selectmenu", {
|
||||
options = this.options,
|
||||
currentItem = self._getSelectedItem();
|
||||
|
||||
// close all other selectmenus
|
||||
$( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
|
||||
$( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
|
||||
});
|
||||
if ( !options.disabled ) {
|
||||
|
||||
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
|
||||
// close all other selectmenus
|
||||
$( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
|
||||
$( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
|
||||
});
|
||||
|
||||
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 ) {
|
||||
@ -319,6 +332,11 @@ $.widget( "ui.selectmenu", {
|
||||
if ( key === "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() {
|
||||
|
Loading…
Reference in New Issue
Block a user