Demo Page for jQuery UI selectmenu

diff --git a/demos/selectmenu/background_image.html b/demos/selectmenu/background_image.html index b3539ebc2fa..f2bd79372da 100644 --- a/demos/selectmenu/background_image.html +++ b/demos/selectmenu/background_image.html @@ -3,7 +3,7 @@ Demo Page for jQuery UI selectmenu - + @@ -11,52 +11,56 @@ - + - @@ -126,8 +130,8 @@

Default: "popup" Style with custom icon images

- - + +

"dropdown" Style with custom avatar 16x16 images

Select a Person: @@ -137,7 +141,7 @@

"dropdown" Style with custom avatar 16x16 images

- +

"dropdown" Style with custom avatar 16x16 images as CSS background

Select a Person: @@ -147,7 +151,7 @@

"dropdown" Style with custom avatar 16x16 images as CSS background

- +

"dropdown" Style with custom avatar 50x50 images

Select an Address: diff --git a/demos/selectmenu/dialog.html b/demos/selectmenu/dialog.html new file mode 100644 index 00000000000..6cde9525518 --- /dev/null +++ b/demos/selectmenu/dialog.html @@ -0,0 +1,70 @@ + + + + + Demo Page for jQuery UI selectmenu + + + + + + + + + + + + + + + + + + +
+
+

+ +

+ + \ No newline at end of file diff --git a/demos/selectmenu/disable_enable.html b/demos/selectmenu/disable_enable.html index 020296c35f1..1191150bafd 100644 --- a/demos/selectmenu/disable_enable.html +++ b/demos/selectmenu/disable_enable.html @@ -58,10 +58,10 @@ var speedB2 = $('select#speedB2').selectmenu(); $("#optionSwitch").toggle( function(){ - speedB2.selectmenu("enable", 2); + speedB2.selectmenu("disable", 2); }, function(){ - speedB2.selectmenu("disable", 2); + speedB2.selectmenu("enable", 2); } ); @@ -74,10 +74,10 @@ var speedD2 = $('select#speedD2').selectmenu(); $("#optgroupSwitch").toggle( function(){ - speedD2.selectmenu("enable", 1, "optgroup"); + speedD2.selectmenu("disable", 1, "optgroup"); }, function(){ - speedD2.selectmenu("disable", 1, "optgroup"); + speedD2.selectmenu("enable", 1, "optgroup"); } ); diff --git a/readme b/readme index 9dd7a0d6403..bc93b1d8616 100644 --- a/readme +++ b/readme @@ -10,7 +10,8 @@ http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_ DOWNLOAD Latest: https://github.com/fnagel/jquery-ui/zipball/selectmenu (jQuery 1.8.x / UI 1.9.x) -Current stable: https://github.com/fnagel/jquery-ui/zipball/selectmenu_v1.3.0 (jQuery 1.8.2 / UI 1.8.24) +Current stable: https://github.com/fnagel/jquery-ui/zipball/selectmenu_v1.4.0 (jQuery 1.8.3 / UI 1.9.2) +Old stable: https://github.com/fnagel/jquery-ui/zipball/selectmenu_v1.3.0 (jQuery 1.8.2 / UI 1.8.24) Old stable: https://github.com/fnagel/jquery-ui/zipball/selectmenu_v1.2.2 (jQuery 1.7.2 / UI 1.8.20) Old stable: https://github.com/fnagel/jquery-ui/zipball/selectmenu_v1.2.1 (jQuery 1.6.4 / UI 1.8.17) diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 12c676fd5a3..52e965e0dba 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -1,8 +1,8 @@ /* - * jQuery UI Selectmenu version 1.4.0pre + * jQuery UI Selectmenu version 1.5.0pre * * Copyright (c) 2009-2010 filament group, http://filamentgroup.com - * Copyright (c) 2010-2012 Felix Nagel, http://www.felixnagel.com + * Copyright (c) 2010-2014 Felix Nagel, http://www.felixnagel.com * Licensed under the MIT (MIT-LICENSE.txt) * * https://github.com/fnagel/jquery-ui/wiki/Selectmenu @@ -28,13 +28,13 @@ $.widget("ui.selectmenu", { _create: function() { var self = this, o = this.options; - + // make / set unique id var selectmenuId = this.element.uniqueId().attr( "id" ); // quick array of button and menu id's this.ids = [ selectmenuId, selectmenuId + '-button', selectmenuId + '-menu' ]; - + // define safe mouseup for future toggling this._safemouseup = true; this.isOpen = false; @@ -159,7 +159,7 @@ $.widget("ui.selectmenu", { // document click closes menu $( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) { //check if open and if the clicket targes parent is the same - if ( self.isOpen && self.ids[ 1 ] != event.target.offsetParent.id ) { + if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length ) { self.close( event ); } }); @@ -307,7 +307,7 @@ $.widget("ui.selectmenu", { 'aria-selected' : false }; if ( selectOptionData[ i ].disabled ) { - thisAAttr[ 'aria-disabled' ] = selectOptionData[ i ].disabled; + thisAAttr[ 'aria-disabled' ] = true; } if ( selectOptionData[ i ].typeahead ) { thisAAttr[ 'typeahead' ] = selectOptionData[ i ].typeahead; @@ -336,13 +336,15 @@ $.widget("ui.selectmenu", { return false; }) .bind('mouseover.selectmenu', function( e ) { - // no hover if diabled + // no hover if disabled if ( !$( this ).hasClass( 'ui-state-disabled' ) && !$( this ).parent( "ul" ).parent( "li" ).hasClass( 'ui-state-disabled' ) ) { - e.optionValue = self.element[ 0 ].options[ $( this ).data( 'index' ) ].value; - self._trigger( "hover", e, self._uiHash() ); - self._selectedOptionLi().addClass( activeClass ); - self._focusedOptionLi().removeClass( 'ui-selectmenu-item-focus ui-state-hover' ); - $( this ).removeClass( 'ui-state-active' ).addClass( 'ui-selectmenu-item-focus ui-state-hover' ); + if ( self._typeAhead_timer === undefined ) { + e.optionValue = self.element[ 0 ].options[ $( this ).data( 'index' ) ].value; + self._trigger( "hover", e, self._uiHash() ); + self._selectedOptionLi().addClass( activeClass ); + self._focusedOptionLi().removeClass( 'ui-selectmenu-item-focus ui-state-hover' ); + $( this ).removeClass( 'ui-state-active' ).addClass( 'ui-selectmenu-item-focus ui-state-hover' ); + } } }) .bind( 'mouseout.selectmenu', function( e ) { @@ -388,7 +390,7 @@ $.widget("ui.selectmenu", { } } } else { - $('

' ).appendTo( this.list ); + $('

' ).appendTo( this.list ); } // we need to set and unset the CSS classes for dropdown and popup style var isDropDown = ( o.style == 'dropdown' ); @@ -414,13 +416,15 @@ $.widget("ui.selectmenu", { this.list.width( o.menuWidth ? o.menuWidth : o.width - o.handleWidth ); } - // reset height to auto - this.list.css( 'height', 'auto' ); - var listH = this.listWrap.height(); - var winH = $( window ).height(); - // calculate default max height - var maxH = o.maxHeight ? Math.min( o.maxHeight, winH ) : winH / 3; - if ( listH > maxH ) this.list.height( maxH ); + // Android 2 (Gingerbread) doesn't support internal scrollable divs. + // Don't limit the menu height for that browser. + if ( !navigator.userAgent.match( /Android 2/ ) ) { + var listH = this.listWrap.height(); + var winH = $( window ).height(); + // calculate default max height + var maxH = o.maxHeight ? Math.min( o.maxHeight, winH ) : winH / 3; + if ( listH > maxH ) this.list.height( maxH ); + } // save reference to actionable li's (not group label li's) this._optionLis = this.list.find( 'li:not(.ui-selectmenu-group)' ); @@ -507,6 +511,7 @@ $.widget("ui.selectmenu", { } } else { nextIndex = i; + break; } } } @@ -703,75 +708,56 @@ $.widget("ui.selectmenu", { _setOption: function( key, value ) { this.options[ key ] = value; - // set if ( key == 'disabled' ) { if ( value ) this.close(); this.element .add( this.newelement ) .add( this.list )[ value ? 'addClass' : 'removeClass' ]( 'ui-selectmenu-disabled ' + 'ui-state-disabled' ) - .attr( "aria-disabled" , value ); + .attr( "aria-disabled" , value ) + .attr( "tabindex" , value ? 1 : 0 ); } }, disable: function( index, type ){ - // if options is not provided, call the parents disable function - if ( typeof( index ) == 'undefined' ) { - this._setOption( 'disabled', true ); - } else { - if ( type == "optgroup" ) { - this._toggleOptgroup( index, false ); - } else { - this._toggleOption( index, false ); - } - } + // if options is not provided, call the parents disable function + if ( typeof( index ) == 'undefined' ) { + this._setOption( 'disabled', true ); + } else { + this._toggleEnabled( ( type || "option" ), index, false ); + } }, enable: function( index, type ) { - // if options is not provided, call the parents enable function - if ( typeof( index ) == 'undefined' ) { - this._setOption( 'disabled', false ); - } else { - if ( type == "optgroup" ) { - this._toggleOptgroup( index, true ); - } else { - this._toggleOption( index, true ); - } - } + // if options is not provided, call the parents enable function + if ( typeof( index ) == 'undefined' ) { + this._setOption( 'disabled', false ); + } else { + this._toggleEnabled( ( type || "option" ), index, true ); + } }, _disabled: function( elem ) { - return $( elem ).hasClass( 'ui-state-disabled' ); + return $( elem ).hasClass( 'ui-state-disabled' ); }, - _toggleOption: function( index, flag ) { - var optionElem = this._optionLis.eq( index ); - if ( optionElem ) { - optionElem - .toggleClass( 'ui-state-disabled', flag ) - .find( "a" ).attr( "aria-disabled", !flag ); + // true = enabled, false = disabled + _toggleEnabled: function( type, index, flag ) { + var element = this.element.find( type ).eq( index ), + elements = ( type === "optgroup" ) ? this.list.find( 'li.ui-selectmenu-group-' + index ) : this._optionLis.eq( index ); + + if ( elements ) { + elements + .toggleClass( 'ui-state-disabled', !flag ) + .attr( "aria-disabled", !flag ); + if ( flag ) { - this.element.find( "option" ).eq( index ).attr( "disabled", "disabled" ); + element.removeAttr( "disabled" ); } else { - this.element.find( "option" ).eq( index ).removeAttr( "disabled" ); + element.attr( "disabled", "disabled" ); } } }, - // true = enabled, false = disabled - _toggleOptgroup: function( index, flag ) { - var optGroupElem = this.list.find( 'li.ui-selectmenu-group-' + index ); - if ( optGroupElem ) { - optGroupElem - .toggleClass( 'ui-state-disabled', flag ) - .attr( "aria-disabled", !flag ); - if ( flag ) { - this.element.find( "optgroup" ).eq( index ).attr( "disabled", "disabled" ); - } else { - this.element.find( "optgroup" ).eq( index ).removeAttr( "disabled" ); - } - } - }, - index: function( newIndex ) { if ( arguments.length ) { if ( !this._disabled( $( this._optionLis[ newIndex ] ) ) && newIndex != this._selectedIndex() ) { @@ -844,7 +830,7 @@ $.widget("ui.selectmenu", { this.listWrap .removeAttr( 'style' ) - .zIndex( this.element.zIndex() + 1 ) + .zIndex( this.element.zIndex() + 2 ) .position( $.extend( positionDefault, o.positionOptions ) ); } });