diff options
Diffstat (limited to 'ui/jquery.ui.selectmenu.js')
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 190 |
1 files changed, 96 insertions, 94 deletions
diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index a0aa14ca7..4db5f6d56 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -21,6 +21,7 @@ $.widget( "ui.selectmenu", { defaultElement: "<select>", options: { dropdown: true, + iconWidth: 26, wrapperElement: "<div />", appendTo: "body", position: { @@ -28,51 +29,52 @@ $.widget( "ui.selectmenu", { at: "left bottom", collision: "none" }, - source: null, - - iconWidth: 26, - + source: null, // callbacks open: null, focus: null, select: null, close: null, - change: null + change: null, }, _create: function() { var self = this, options = this.options, - tabindex = this.element.attr( 'tabindex' ); - - // set a default id value, generate a new random one if not set by developer - var selectmenuId = self.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 ); - + tabindex = this.element.attr( 'tabindex' ) + // set a default id value, generate a new random one if not set by developer + selectmenuId = self.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 ); + // quick array of button and menu id's self.ids = [ selectmenuId + '-button', selectmenuId + '-menu' ]; // get options self.items = self.element.find( 'option' ); + // set options value + options.value = self.element[0].value; + // catch click event of the label self.element.bind( 'click.selectmenu', function() { self.newelement.focus(); return false; - }); + }) + .hide(); // create button self.newelement = $( '<a />', { href: '#' + selectmenuId, tabindex: ( tabindex ? tabindex : self.element.attr( 'disabled' ) ? 1 : 0 ), - 'aria-haspopup': true, - 'aria-owns': self.ids[ 1 ], + id: self.ids[ 0 ], css: { width: self.element.width() - } + }, + 'aria-owns': self.ids[ 1 ], + 'aria-haspopup': true }) .addClass( self.widgetBaseClass + '-button' ) .button({ - label: self.items.eq( self.element[0].selectedIndex ).text(), + label: self.items.eq( self.element[ 0 ].selectedIndex ).text(), icons: { primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' ) } @@ -83,7 +85,7 @@ $.widget( "ui.selectmenu", { .insertAfter( self.element ); self.newelement - .bind( 'mousedown.selectmenu' , function(event) { + .bind( 'mousedown.selectmenu' , function( event ) { self._toggle( event ); return false; }) @@ -101,14 +103,14 @@ $.widget( "ui.selectmenu", { self._toggle(event); break; case $.ui.keyCode.UP: - if (event.altKey) { + if ( event.altKey ) { self._toggle( event ); } else { self._previous(); } break; case $.ui.keyCode.DOWN: - if (event.altKey) { + if ( event.altKey ) { self._toggle( event ); } else { self._next(); @@ -125,55 +127,8 @@ $.widget( "ui.selectmenu", { } return ret; }); - - // create menu portion, append to body - self.list = $( '<ul />', { - 'class': 'ui-widget ui-widget-content', - 'aria-hidden': true, - 'aria-labelledby': self.ids[0], - role: 'listbox', - id: self.ids[1], - }); - - self.listWrap = $( options.wrapperElement ) - .addClass( self.widgetBaseClass + '-menu' ) - .css("width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth) - .append( self.list ) - .appendTo( options.appendTo ); - - self._renderMenu( self.list, self._initSource() ); - - self.list - .data( 'element.selectelemenu', self.element ) - .menu({ - select: function( event, ui ) { - var item = ui.item.data( "item.selectmenu" ); - console.log(item); - - self.newelement.children( 'span.ui-button-text' ).text( item.label ); - self._index( item.index ); - self.close( event, true); - }, - focus: function( event, ui ) { - var item = ui.item.data( "item.selectmenu" ); - if ( !self.opened ) { - self.newelement.children( 'span.ui-button-text' ).text( item.label ); - self._index( item.index ); - } - } - }) - .bind( 'mouseenter.selectelemenu', function() { - self.hover = true; - }) - .bind( 'mouseleave .selectelemenu', function() { - self.hover = false; - }); - if ( options.dropdown ) { - self.list - .addClass( 'ui-corner-bottom' ) - .removeClass( 'ui-corner-all' ); - } + self.refresh(); // document click closes menu $( document ).bind( 'mousedown.selectmenu', function( event ) { @@ -203,19 +158,16 @@ $.widget( "ui.selectmenu", { var currentItem = self._getCurrenItem(); - self.listWrap.addClass( self.widgetBaseClass + '-open' ); - + 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); - + var _offset = (self.list.offset().top - currentItem.offset().top + (self.newelement.outerHeight() - currentItem.outerHeight()) / 2); $.extend( options.position, { my: "left top", at: "left top", @@ -230,6 +182,61 @@ $.widget( "ui.selectmenu", { this.opened = true; }, + refresh: function() { + var self = this, + options = this.options; + + // create menu portion, append to body + self.list = $( '<ul />', { + 'class': 'ui-widget ui-widget-content', + 'aria-hidden': true, + 'aria-labelledby': self.ids[0], + role: 'listbox', + id: self.ids[1], + }); + + self.listWrap = $( options.wrapperElement ) + .addClass( self.widgetBaseClass + '-menu' ) + .css("width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth) + .append( self.list ) + .appendTo( options.appendTo ); + + self._initSource(); + self._renderMenu( self.list, options.source ); + + self.list + .data( 'element.selectelemenu', self.element ) + .menu({ + select: function( event, ui ) { + var item = ui.item.data( "item.selectmenu" ); + console.log(item); + + self.newelement.children( 'span.ui-button-text' ).text( item.label ); + self._index( item.index ); + self.close( event, true); + }, + focus: function( event, ui ) { + var item = ui.item.data( "item.selectmenu" ); + if ( !self.opened ) { + self.newelement.children( 'span.ui-button-text' ).text( item.label ); + self._index( item.index ); + } + } + }) + .bind( 'mouseenter.selectelemenu', function() { + self.hover = true; + }) + .bind( 'mouseleave .selectelemenu', function() { + self.hover = false; + }); + + if ( options.dropdown ) { + self.list + .addClass( 'ui-corner-bottom' ) + .removeClass( 'ui-corner-all' ); + } + }, + close: function( event, focus ) { var self = this, options = this.options; @@ -299,39 +306,34 @@ $.widget( "ui.selectmenu", { if ( key === "appendTo" ) { this.listWrap.appendTo( $( value || "body", this.element[0].ownerDocument )[0] ); } + if ( key === "value" && value) { + this.element[0].value = value; + } }, _initSource: function() { - var data = []; - - $.each( this.items, function( index, item ) { - var option = $( item ); - data.push({ - index: index, - value: option.attr( 'value' ), - label: option.text(), - optgroup: option.parent("optgroup").attr("label") || false - }); - }); - - // console.log(data); - return data; + if ( !$.isArray( this.options.source ) ) { + var data = []; + $.each( this.items, function( index, item ) { + var option = $( item ); + data.push({ + index: index, + value: option.attr( 'value' ), + label: option.text(), + optgroup: option.parent("optgroup").attr("label") || false + }); + }); + this.options.source = data; + } }, _destroy: function() { }, - _value: function( newValue ) { - if (arguments.length) { - this.element[0].value = newValue; - } else { - return this.element[0].value; - } - }, - _index: function( newIndex ) { if ( arguments.length ) { this.element[0].selectedIndex = newIndex; + self.options.value = this._getCurrenItem().attr( "value" ); } else { return this.element[0].selectedIndex; } |