diff options
| -rw-r--r-- | demos/selectmenu/default.html | 9 | ||||
| -rw-r--r-- | demos/selectmenu/dialog.html | 4 | ||||
| -rw-r--r-- | demos/selectmenu/typeahead.html | 4 | ||||
| -rw-r--r-- | themes/base/jquery.ui.selectmenu.css | 4 | ||||
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 109 |
5 files changed, 66 insertions, 64 deletions
diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index dd513554a..90ce9d2f6 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -18,9 +18,8 @@ body {font-size: 62.5%; font-family:"Verdana",sans-serif; } fieldset { border:0; } label,select,.ui-select-menu { float: left; margin-right: 10px; } - select { width: 200px; } - .wrap span.ui-selectmenu-item-header, - .wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; } + select { width: 200px; } + .wrap ul.ui-selectmenu-menu-popup li a { font-weight: bold; } </style> <script type="text/javascript"> $(function(){ @@ -28,9 +27,9 @@ $('select#speedAa').selectmenu({ style:'popup', - maxHeight: 150, - wrapperElement: "<div class='wrap' />" + maxHeight: 150 }); + $('select#speedAa').selectmenu("widget").addClass("wrap"); $('select#speedB').selectmenu({ style:'popup', diff --git a/demos/selectmenu/dialog.html b/demos/selectmenu/dialog.html index a063b82c6..aa6b8b4ee 100644 --- a/demos/selectmenu/dialog.html +++ b/demos/selectmenu/dialog.html @@ -19,9 +19,7 @@ body {font-size: 62.5%; font-family:"Verdana",sans-serif; } fieldset { border:0; } label,select,.ui-select-menu { float: left; margin-right: 10px; } - select { width: 200px; } - .wrap span.ui-selectmenu-item-header, - .wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; } + select { width: 200px; } </style> <script type="text/javascript"> $(function(){ diff --git a/demos/selectmenu/typeahead.html b/demos/selectmenu/typeahead.html index 79a46890f..6f5dc7098 100644 --- a/demos/selectmenu/typeahead.html +++ b/demos/selectmenu/typeahead.html @@ -18,9 +18,7 @@ body {font-size: 62.5%; font-family:"Verdana",sans-serif; } fieldset { border:0; } label,select,.ui-select-menu { float: left; margin-right: 10px; } - select { width: 200px; } - .wrap span.ui-selectmenu-item-header, - .wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; } + select { width: 200px; } </style> <script type="text/javascript"> $(function(){ diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css index ff45c11cf..d2c65bc77 100644 --- a/themes/base/jquery.ui.selectmenu.css +++ b/themes/base/jquery.ui.selectmenu.css @@ -6,7 +6,6 @@ .ui-selectmenu-menu ul { padding:0; margin:0; list-style:none; position: relative; overflow: auto; overflow-y: auto ; overflow-x: hidden; } .ui-selectmenu-open { display: block; } .ui-selectmenu-menu-popup { margin-top: -1px; } -.ui-selectmenu-menu-dropdown { } .ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; } .ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 2.1em .405em 1em; outline:none; text-decoration:none; } .ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { cursor: default; } @@ -14,11 +13,8 @@ .ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; } .ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; } .ui-selectmenu-status { line-height: 1.4em; } -.ui-selectmenu-open li.ui-selectmenu-item-focus a { } -.ui-selectmenu-open li.ui-selectmenu-item-selected { } .ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; } .ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; } -.ui-selectmenu-menu li .ui-selectmenu-item-content { } .ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; } /* for optgroups */ .ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; } diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index ed7bdd16d..f3f70b97e 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -1,5 +1,5 @@ /* - * jQuery UI selectmenu version 1.2.0 + * jQuery UI selectmenu dev version * * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) @@ -17,6 +17,7 @@ $.widget("ui.selectmenu", { eventPrefix: "selectmenu", options: { transferClasses: true, + appendTo: "body", typeAhead: 1000, style: 'dropdown', positionOptions: { @@ -30,8 +31,8 @@ $.widget("ui.selectmenu", { maxHeight: null, icons: null, format: null, - bgImage: function() {}, - wrapperElement: "<div />" + escapeHtml: false, + bgImage: function() {} }, _create: function() { @@ -57,7 +58,7 @@ $.widget("ui.selectmenu", { 'aria-haspopup': true, 'aria-owns': this.ids[ 2 ] }); - this.newelementWrap = $( o.wrapperElement ) + this.newelementWrap = $( "<span />" ) .append( this.newelement ) .insertAfter( this.element ); @@ -131,9 +132,14 @@ $.widget("ui.selectmenu", { case $.ui.keyCode.TAB: ret = true; break; + case $.ui.keyCode.PAGE_UP: case $.ui.keyCode.HOME: self.index(0); break; + case $.ui.keyCode.PAGE_DOWN: + case $.ui.keyCode.END: + self.index(self._optionLis.length); + break; default: ret = true; } @@ -145,15 +151,17 @@ $.widget("ui.selectmenu", { } return true; }) - .bind('mouseover.selectmenu focus.selectmenu', function() { - if (!o.disabled) { - $(this).addClass(self.widgetBaseClass + '-focus ui-state-hover'); - } + .bind('mouseover.selectmenu', function() { + if (!o.disabled) $(this).addClass('ui-state-hover'); }) - .bind('mouseout.selectmenu blur.selectmenu', function() { - if (!o.disabled) { - $(this).removeClass(self.widgetBaseClass + '-focus ui-state-hover'); - } + .bind('mouseout.selectmenu', function() { + if (!o.disabled) $(this).removeClass('ui-state-hover'); + }) + .bind('focus.selectmenu', function() { + if (!o.disabled) $(this).addClass('ui-state-focus'); + }) + .bind('blur.selectmenu', function() { + if (!o.disabled) $(this).removeClass('ui-state-focus'); }); // document click closes menu @@ -194,10 +202,9 @@ $.widget("ui.selectmenu", { 'aria-labelledby': this.ids[1], 'id': this.ids[2] }); - this.listWrap = $( o.wrapperElement ) - .addClass( self.widgetBaseClass + '-menu' ) - .append( this.list ) - .appendTo( 'body' ); + this.listWrap = $( "<div />", { + 'class': self.widgetBaseClass + '-menu' + }).append( this.list ).appendTo( o.appendTo ); // transfer menu click to menu button this.list @@ -272,21 +279,19 @@ $.widget("ui.selectmenu", { // serialize selectmenu element options var selectOptionData = []; - this.element - .find('option') - .each(function() { - var opt = $(this); - selectOptionData.push({ - value: opt.attr('value'), - text: self._formatText(opt.text()), - selected: opt.attr('selected'), - disabled: opt.attr('disabled'), - classes: opt.attr('class'), - typeahead: opt.attr('typeahead'), - parentOptGroup: opt.parent('optgroup'), - bgImage: o.bgImage.call(opt) - }); + this.element.find('option').each(function() { + var opt = $(this); + selectOptionData.push({ + value: opt.attr('value'), + text: self._formatText(opt.text()), + selected: opt.attr('selected'), + disabled: opt.attr('disabled'), + classes: opt.attr('class'), + typeahead: opt.attr('typeahead'), + parentOptGroup: opt.parent('optgroup'), + bgImage: o.bgImage.call(opt) }); + }); // active state class is only used in popup style var activeClass = (self.options.style == "popup") ? " ui-state-active" : ""; @@ -302,7 +307,7 @@ $.widget("ui.selectmenu", { thisLiAttr[ 'class' ] = this.namespace + '-state-disabled'; } var thisAAttr = { - html: selectOptionData[i].text, + html: selectOptionData[i].text || ' ', href : '#nogo', tabindex : -1, role : 'option', @@ -419,13 +424,10 @@ $.widget("ui.selectmenu", { // reset height to auto this.list.css( 'height', 'auto' ); var listH = this.listWrap.height(); - // calculate default max height - if ( o.maxHeight && o.maxHeight < listH ) { - this.list.height( o.maxHeight ); - } else { - var winH = $( window ).height() / 3; - if ( winH < listH ) this.list.height( winH ); - } + 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(.' + self.widgetBaseClass + '-group)' ); @@ -439,6 +441,9 @@ $.widget("ui.selectmenu", { // update value this.index( this._selectedIndex() ); + + // set selected item so movefocus has intial state + this._selectedOptionLi().addClass(this.widgetBaseClass + '-item-focus'); // needed when selectmenu is placed at the very bottom / top of the page clearTimeout(this.refreshTimeout); @@ -471,7 +476,6 @@ $.widget("ui.selectmenu", { _typeAhead: function( code, eventType ) { var self = this, c = String.fromCharCode(code).toLowerCase(), - items = this.list.find( 'li a' ), matchee = null, nextIndex = null; @@ -509,11 +513,10 @@ $.widget("ui.selectmenu", { this._selectedOptionLi().data('index') : this._focusedOptionLi().data('index')) || 0; - for (var i = 0; i < items.length; i++) { - var thisText = items.eq(i).text().substr(0, matchee.length).toLowerCase(); + for (var i = 0; i < this._optionLis.length; i++) { + var thisText = this._optionLis.eq(i).text().substr(0, matchee.length).toLowerCase(); if ( thisText === matchee ) { - if ( self._typeAhead_cycling ) { if ( nextIndex === null ) nextIndex = i; @@ -533,7 +536,7 @@ $.widget("ui.selectmenu", { // index? Because we don't what is the exact action to do, it // depends if the user is typing on the element or on the popped // up menu - items.eq(nextIndex).trigger( eventType ); + this._optionLis.eq(nextIndex).find("a").trigger( eventType ); } self._typeAhead_timer = window.setTimeout(function() { @@ -610,6 +613,10 @@ $.widget("ui.selectmenu", { if (this._disabled(event.currentTarget)) { return false; } this._trigger("select", event, this._uiHash()); }, + + widget: function() { + return this.listWrap.add( this.newelementWrap ); + }, _closeOthers: function(event) { $('.' + this.widgetBaseClass + '.ui-state-active').not(this.newelement).each(function() { @@ -625,9 +632,14 @@ $.widget("ui.selectmenu", { this.open(event); } }, - + _formatText: function(text) { - return (this.options.format ? this.options.format(text) : text); + if (this.options.format) { + text = this.options.format(text); + } else if (this.options.escapeHtml) { + text = $('<div />').text(text).html(); + } + return text; }, _selectedIndex: function() { @@ -663,7 +675,7 @@ $.widget("ui.selectmenu", { (amt > 0) ? ++amt : --amt; this._moveSelection(amt, newIndex); } else { - return this._optionLis.eq(newIndex).trigger('mouseup'); + this._optionLis.eq(newIndex).trigger('mouseover').trigger('mouseup'); } } }, @@ -702,7 +714,7 @@ $.widget("ui.selectmenu", { }, _scrollPage: function(direction) { - var numPerPage = Math.floor(this.list.outerHeight() / this.list.find('li:first').outerHeight()); + var numPerPage = Math.floor(this.list.outerHeight() / this._optionLis.first().outerHeight()); numPerPage = (direction == 'up' ? -numPerPage : numPerPage); this._moveFocus(numPerPage); }, @@ -852,7 +864,6 @@ $.widget("ui.selectmenu", { var selected = this._selectedOptionLi(); var _offset = "0 " + ( this.list.offset().top - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2); } - // update zIndex if jQuery UI is able to process this.listWrap .zIndex( this.element.zIndex() + 1 ) .position({ @@ -861,7 +872,7 @@ $.widget("ui.selectmenu", { my: o.positionOptions.my, at: o.positionOptions.at, offset: o.positionOptions.offset || _offset, - collision: o.positionOptions.collision || 'flip' + collision: o.positionOptions.collision || o.style == "popup" ? 'fit' :'flip' }); } }); |