diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index edf3df1be..79c3c1435 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -28,29 +28,24 @@ $.widget( "ui.selectmenu", { at: "left bottom", collision: "none" }, - source: null, value: null, // callbacks open: null, focus: null, select: null, - close: null - // change: null + close: null, + change: null }, _create: function() { var that = this, options = this.options, - tabindex = this.element.attr( 'tabindex' ), // set a default id value, generate a new random one if not set by developer selectmenuId = that.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 ); // quick array of button and menu id's - that.ids = [ selectmenuId + '-button', selectmenuId + '-menu' ]; - - // save options - that.items = that.element.find( 'option' ); - + that.ids = [ selectmenuId, selectmenuId + '-button', selectmenuId + '-menu' ]; + // set current value if ( options.value ) { that.element[0].value = options.value; @@ -58,28 +53,57 @@ $.widget( "ui.selectmenu", { options.value = that.element[0].value; } + that._addNewelement(); + that._addList(); + + // built menu + that.refresh(); + + that._bind( that.newelement, that._newelementEvents ); + + // document click closes menu + that._bind( document, { + 'mousedown': function( event ) { + if ( that.opened && !that.hover) { + window.setTimeout( function() { + that.close( event ); + }, 200 ); + } + } + }); + }, + + _addNewelement: function() { + var that = this, + options = this.options, + tabindex = this.element.attr( 'tabindex' ); + // catch click event of the label - that.element.bind( 'click.selectmenu', function() { - that.newelement.focus(); - return false; - }) - .hide(); + that._bind({ + 'click': function( event ) { + that.newelement.focus(); + event.preventDefault(); + } + }); + + // hide original select tag + that.element.hide(); // create button that.newelement = $( '', { - href: '#' + selectmenuId, + href: '#' + that.ids[ 0 ], tabindex: ( tabindex ? tabindex : that.element.attr( 'disabled' ) ? 1 : 0 ), - id: that.ids[ 0 ], + id: that.ids[ 1 ], css: { width: that.element.outerWidth() }, 'aria-disabled': options.disabled, - 'aria-owns': that.ids[ 1 ], + 'aria-owns': that.ids[ 2 ], 'aria-haspopup': true }) .addClass( that.widgetBaseClass + '-button' ) .button({ - label: that.items.eq( this.element[0].selectedIndex ).text(), + label: this.element.find( "option:selected" ).text(), icons: { primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' ) } @@ -89,101 +113,45 @@ $.widget( "ui.selectmenu", { that.newelementWrap = $( options.wrapperElement ) .append( that.newelement ) .insertAfter( that.element ); - - that.newelement.bind({ - 'mousedown.selectmenu': function( event ) { - that._toggle( event ); - return false; - }, - 'click.selectmenu': function() { - return false; - }, - 'keydown.selectmenu': function( event ) { - switch (event.keyCode) { - case $.ui.keyCode.TAB: - if ( that.opened ) that.close(); - break; - case $.ui.keyCode.ENTER: - if ( that.opened ) that.list.menu( "select", that._getSelectedItem() ); - event.preventDefault(); - break; - case $.ui.keyCode.SPACE: - that._toggle(event); - event.preventDefault(); - break; - case $.ui.keyCode.UP: - if ( event.altKey ) { - that._toggle( event ); - } else { - that._move( "previous", event ); - } - event.preventDefault(); - break; - case $.ui.keyCode.DOWN: - if ( event.altKey ) { - that._toggle( event ); - } else { - that._move( "next", event ); - } - event.preventDefault(); - break; - case $.ui.keyCode.LEFT: - that._move( "previous", event ); - event.preventDefault(); - break; - case $.ui.keyCode.RIGHT: - that._move( "next", event ); - event.preventDefault(); - break; - default: - that.list.trigger( event ); - } - } - }); - - // built menu - that.refresh(); - - // document click closes menu - $( document ).bind( 'mousedown.selectmenu', function( event ) { - if ( that.opened && !that.hover) { - window.setTimeout( function() { - that.close( event ); - }, 200 ); - } - }); }, - // TODO update the value option - refresh: function() { + _addList: function() { var that = this, options = this.options; - + // create menu portion, append to body that.list = $( '