mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Selectmenu: improved visual style
This commit is contained in:
parent
e70092f602
commit
8120b0d6df
5
themes/base/jquery.ui.selectmenu.css
vendored
5
themes/base/jquery.ui.selectmenu.css
vendored
@ -10,7 +10,8 @@
|
||||
|
||||
.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-open { display: block; }
|
||||
|
||||
.ui-button span.ui-icon { right: 0.5em; left: auto; }
|
||||
.ui-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em }
|
||||
.ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; }
|
||||
.ui-selectmenu-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em }
|
29
ui/jquery.ui.selectmenu.js
vendored
29
ui/jquery.ui.selectmenu.js
vendored
@ -23,6 +23,7 @@ $.widget( "ui.selectmenu", {
|
||||
version: "@VERSION",
|
||||
defaultElement: "<select>",
|
||||
options: {
|
||||
dropdown: true,
|
||||
wrapperElement: "<div />",
|
||||
appendTo: "body",
|
||||
position: {
|
||||
@ -71,12 +72,15 @@ $.widget( "ui.selectmenu", {
|
||||
css: {
|
||||
width: self.element.width()
|
||||
}
|
||||
}).button({
|
||||
})
|
||||
.addClass( self.widgetBaseClass + '-button' )
|
||||
.button({
|
||||
label: self.items.eq( self.element[0].selectedIndex ).text(),
|
||||
icons: {
|
||||
primary: "ui-icon-triangle-2-n-s"
|
||||
primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' )
|
||||
}
|
||||
});
|
||||
|
||||
self.newelementWrap = $( options.wrapperElement )
|
||||
.append( self.newelement )
|
||||
.insertAfter( self.element );
|
||||
@ -131,7 +135,6 @@ $.widget( "ui.selectmenu", {
|
||||
return ret;
|
||||
});
|
||||
|
||||
|
||||
// create menu portion, append to body
|
||||
self.list = $( '<ul />', {
|
||||
'class': 'ui-widget ui-widget-content',
|
||||
@ -167,6 +170,12 @@ $.widget( "ui.selectmenu", {
|
||||
}
|
||||
});
|
||||
|
||||
if ( options.dropdown ) {
|
||||
self.list
|
||||
.addClass( 'ui-corner-bottom' )
|
||||
.removeClass( 'ui-corner-all' );
|
||||
}
|
||||
|
||||
// document click closes menu
|
||||
$( document ).bind( 'mousedown.selectmenu', function( event ) {
|
||||
if ( self.options.open ) {
|
||||
@ -190,6 +199,14 @@ $.widget( "ui.selectmenu", {
|
||||
var self = this,
|
||||
options = this.options;
|
||||
|
||||
|
||||
if ( options.dropdown ) {
|
||||
self.newelement
|
||||
.addClass( 'ui-corner-top' )
|
||||
.removeClass( 'ui-corner-all' );
|
||||
}
|
||||
|
||||
|
||||
self.listWrap.addClass( self.widgetBaseClass + '-open' );
|
||||
this.options.open = true;
|
||||
|
||||
@ -203,6 +220,12 @@ $.widget( "ui.selectmenu", {
|
||||
var self = this,
|
||||
options = this.options;
|
||||
|
||||
if ( options.dropdown ) {
|
||||
self.newelement
|
||||
.addClass( 'ui-corner-all' )
|
||||
.removeClass( 'ui-corner-top' );
|
||||
}
|
||||
|
||||
self.listWrap.removeClass( self.widgetBaseClass + '-open' );
|
||||
this.options.open = false;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user