Permalink
Browse files

Selectmenu: improved popop style, styles and focus handling

  • Loading branch information...
1 parent 85a34eb commit bb4291457cc311ef25382c82f26d01b9a1a1f561 @fnagel fnagel committed Sep 23, 2011
Showing with 98 additions and 36 deletions.
  1. +30 −0 demos/selectmenu/default.html
  2. +3 −1 themes/base/jquery.ui.selectmenu.css
  3. +65 −35 ui/jquery.ui.selectmenu.js
View
30 demos/selectmenu/default.html
@@ -17,13 +17,18 @@
$('select#speedA').selectmenu({
dropdown: false
});
+ $('select#speedB').selectmenu({
+ dropdown: false,
+ wrapperElement: '<div class="overflow"/>',
+ });
$('select#filesC').selectmenu();
});
</script>
<style>
form { margin: 200px 0 0 0; }
fieldset { border: 0; }
select { width: 200px; }
+ .overflow ul { height: 200px; overflow: auto; }
</style>
</head>
<body>
@@ -43,6 +48,31 @@
<br />
<br />
<br />
+ <label for="speedB">Select a Speed:</label>
+ <select name="speedB" id="speedB">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option value="11">11</option>
+ <option value="12">12</option>
+ <option value="13">13</option>
+ <option value="14">14</option>
+ <option value="15">15</option>
+ <option value="16">16</option>
+ <option value="17">17</option>
+ <option value="18">18</option>
+ <option value="19">19</option>
+ </select>
+ <br />
+ <br />
+ <br />
<label for="filesC">Select a file:</label>
<select name="filesC" id="filesC">
<optgroup label="scripts">
View
4 themes/base/jquery.ui.selectmenu.css
@@ -10,7 +10,9 @@
.ui-selectmenu-menu { padding: 0; margin: 0; position:absolute; top: 0; display: none; }
.ui-selectmenu-menu .ui-menu { padding: 0; }
-.ui-selectmenu-menu li.ui-selectmenu-optgroup { font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; }
+.ui-selectmenu-menu .ui-menu .ui-menu-item a { padding: 0.3em 1em 0.3em 1em; }
+.ui-selectmenu-menu .ui-menu .ui-menu-item a.ui-state-focus { margin: -1px 0 -1px -1px; }
+.ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup { font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; }
.ui-selectmenu-open { display: block; }
.ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; }
View
100 ui/jquery.ui.selectmenu.js
@@ -104,27 +104,21 @@ $.widget( "ui.selectmenu", {
if (event.altKey) {
self._toggle( event );
} else {
- self.list.trigger( event );
- if ( options.open ) self.list.focus();
+ self._previous();
}
break;
case $.ui.keyCode.DOWN:
if (event.altKey) {
self._toggle( event );
} else {
- self.list.trigger( event );
- if ( options.open ) self.list.focus();
+ self._next();
}
break;
case $.ui.keyCode.LEFT:
- // event.which = 40;
- event.keyCode = 40;
- self.list.trigger( event );
+ self._previous();
break;
case $.ui.keyCode.RIGHT:
- // event.which = 38;
- event.keyCode = 38;
- self.list.trigger( event );
+ self._next();
break;
default:
self.list.trigger( event );
@@ -139,13 +133,11 @@ $.widget( "ui.selectmenu", {
'aria-labelledby': self.ids[0],
role: 'listbox',
id: self.ids[1],
- css: {
- width: ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth
- }
});
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 );
@@ -156,18 +148,27 @@ $.widget( "ui.selectmenu", {
.menu({
select: function( event, ui ) {
var item = ui.item.data( "item.selectmenu" );
- // console.log(item);
+ console.log(item);
- self.newelement.children( 'span.ui-button-text' ).text( item.label );
- self._value( item.value );
+ 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 ( !options.open ) self.newelement.children( 'span.ui-button-text' ).text( item.label );
+ 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' )
@@ -176,7 +177,7 @@ $.widget( "ui.selectmenu", {
// document click closes menu
$( document ).bind( 'mousedown.selectmenu', function( event ) {
- if ( self.options.open ) {
+ if ( self.opened && !self.hover) {
window.setTimeout( function() {
self.close( event );
}, 200 );
@@ -185,8 +186,22 @@ $.widget( "ui.selectmenu", {
},
+ _previous: function() {
+ this.list.menu( "focus", null, this._getCurrenItem() );
+ this.list.menu("previous");
+ },
+
+ _next: function() {
+ this.list.menu( "focus", null, this._getCurrenItem() );
+ this.list.menu("next");
+ },
+
+ _getCurrenItem: function() {
+ return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this._index() );
+ },
+
_toggle: function( event ) {
- if ( this.options.open ) {
+ if ( this.opened ) {
this.close( event );
} else {
this.open( event );
@@ -207,25 +222,42 @@ $.widget( "ui.selectmenu", {
.addClass( 'ui-corner-top' )
.removeClass( 'ui-corner-all' );
}
+
+ var currentItem = self._getCurrenItem();
self.listWrap.addClass( self.widgetBaseClass + '-open' );
- this.options.open = true;
+
+ // self.newelement.blur();
+ self.list.focus().menu( "focus", null, currentItem )
+ // currentItem.focus();
if ( !options.dropdown ) {
- // var _offset = self.list.outerWidth()
+ if ( self.list.css("overflow") == "auto" ) {
+ self.list.scrollTop( self.list.scrollTop() + currentItem.position().top - self.list.outerHeight()/2 + currentItem.outerHeight()/2 );
+ }
+ // console.log( self.newelement.offset().top );
+ // console.log( currentItem.offset().top );
+ var _offset = (self.list.offset().top - currentItem.offset().top + (self.newelement.outerHeight() - currentItem.outerHeight()) / 2);
+ // console.log( currentItem );
+ // console.log( currentItem.position().top );
+ // console.log( _offset );
+
+
$.extend( options.position, {
- my: "left center",
- at: "left center",
- collision: "fit"
+ my: "left top",
+ at: "left top",
+ offset: "0 " + _offset
});
}
- console.log(options.position);
+ // console.log(options.position);
self.listWrap.position( $.extend({
of: this.newelementWrap
}, options.position ));
+
+ this.opened = true;
},
close: function( event, focus ) {
@@ -239,7 +271,7 @@ $.widget( "ui.selectmenu", {
}
self.listWrap.removeClass( self.widgetBaseClass + '-open' );
- this.options.open = false;
+ this.opened = false;
if (focus) self.newelement.focus();
},
@@ -262,7 +294,10 @@ $.widget( "ui.selectmenu", {
.data( "item.selectmenu", item )
.append( $( "<a />", {
text: item.label,
- href: '#nogo'
+ href: '#',
+ click: function( event ) {
+ event.preventDefault();
+ }
})
).appendTo( ul );
},
@@ -280,15 +315,9 @@ $.widget( "ui.selectmenu", {
_setOption: function( key, value ) {
this._super( "_setOption", key, value );
- if ( key === "source" ) {
- this._initSource();
- }
if ( key === "appendTo" ) {
- this.listWrap.appendTo( $( value || "body", this.element[0].ownerDocument )[0] )
+ this.listWrap.appendTo( $( value || "body", this.element[0].ownerDocument )[0] );
}
- // if ( key === "disabled" && value && this.xhr ) {
- // this.xhr.abort();
- // }
},
_initSource: function() {
@@ -297,6 +326,7 @@ $.widget( "ui.selectmenu", {
$.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

0 comments on commit bb42914

Please sign in to comment.