mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Selectmenu: improved popop style, styles and focus handling
This commit is contained in:
Felix Nagel
parent
85a34ebedb
commit
bb4291457c
@ -17,6 +17,10 @@
|
||||
$('select#speedA').selectmenu({
|
||||
dropdown: false
|
||||
});
|
||||
$('select#speedB').selectmenu({
|
||||
dropdown: false,
|
||||
wrapperElement: '<div class="overflow"/>',
|
||||
});
|
||||
$('select#filesC').selectmenu();
|
||||
});
|
||||
</script>
|
||||
@ -24,6 +28,7 @@
|
||||
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">
|
||||
|
||||
4
themes/base/jquery.ui.selectmenu.css
vendored
4
themes/base/jquery.ui.selectmenu.css
vendored
@ -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; }
|
||||
|
||||
100
ui/jquery.ui.selectmenu.js
vendored
100
ui/jquery.ui.selectmenu.js
vendored
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user