Skip to content
Permalink
Browse files

Selectmenu: improved popop style, styles and focus handling

  • Loading branch information
fnagel committed Sep 23, 2011
1 parent 85a34eb commit bb4291457cc311ef25382c82f26d01b9a1a1f561
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
@@ -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">
@@ -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; }
@@ -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.
You can’t perform that action at this time.