library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-12-07 06:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Selectmenu: improved visual style

Browse Source
This commit is contained in:
Felix Nagel 2011-09-22 21:20:49 +02:00
parent e70092f602
commit 8120b0d6df
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
themes/base/jquery.ui.selectmenu.css vendored
View File

@ -10,7 +10,8 @@
.ui-selectmenu-menu { padding: 0; margin: 0; position:absolute; top: 0; display: none; } .ui-selectmenu-menu { padding: 0; margin: 0; position:absolute; top: 0; display: none; }
.ui-selectmenu-menu .ui-menu { padding: 0; } .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-selectmenu-open { display: block; }
.ui-button span.ui-icon { right: 0.5em; left: auto; } .ui-selectmenu-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-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em }

31
ui/jquery.ui.selectmenu.js vendored
View File

@ -23,6 +23,7 @@ $.widget( "ui.selectmenu", {
version: "@VERSION", version: "@VERSION",
defaultElement: "<select>", defaultElement: "<select>",
options: { options: {
dropdown: true,
wrapperElement: "<div />", wrapperElement: "<div />",
appendTo: "body", appendTo: "body",
position: { position: {
@ -65,18 +66,21 @@ $.widget( "ui.selectmenu", {
// create button // create button
self.newelement = $( '<a />', { self.newelement = $( '<a />', {
href: '#' + selectmenuId, href: '#' + selectmenuId,
tabindex: (tabindex ? tabindex : self.element.attr( 'disabled' ) ? 1 : 0), tabindex: ( tabindex ? tabindex : self.element.attr( 'disabled' ) ? 1 : 0 ),
'aria-haspopup': true, 'aria-haspopup': true,
'aria-owns': self.ids[ 1 ], 'aria-owns': self.ids[ 1 ],
css: { css: {
width: self.element.width() width: self.element.width()
} }
}).button({ })
.addClass( self.widgetBaseClass + '-button' )
.button({
label: self.items.eq( self.element[0].selectedIndex ).text(), label: self.items.eq( self.element[0].selectedIndex ).text(),
icons: { 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 ) self.newelementWrap = $( options.wrapperElement )
.append( self.newelement ) .append( self.newelement )
.insertAfter( self.element ); .insertAfter( self.element );
@ -131,7 +135,6 @@ $.widget( "ui.selectmenu", {
return ret; return ret;
}); });
// create menu portion, append to body // create menu portion, append to body
self.list = $( '<ul />', { self.list = $( '<ul />', {
'class': 'ui-widget ui-widget-content', '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 click closes menu
$( document ).bind( 'mousedown.selectmenu', function( event ) { $( document ).bind( 'mousedown.selectmenu', function( event ) {
if ( self.options.open ) { if ( self.options.open ) {
@ -190,6 +199,14 @@ $.widget( "ui.selectmenu", {
var self = this, var self = this,
options = this.options; options = this.options;
if ( options.dropdown ) {
self.newelement
.addClass( 'ui-corner-top' )
.removeClass( 'ui-corner-all' );
}
self.listWrap.addClass( self.widgetBaseClass + '-open' ); self.listWrap.addClass( self.widgetBaseClass + '-open' );
this.options.open = true; this.options.open = true;
@ -203,6 +220,12 @@ $.widget( "ui.selectmenu", {
var self = this, var self = this,
options = this.options; options = this.options;
if ( options.dropdown ) {
self.newelement
.addClass( 'ui-corner-all' )
.removeClass( 'ui-corner-top' );
}
self.listWrap.removeClass( self.widgetBaseClass + '-open' ); self.listWrap.removeClass( self.widgetBaseClass + '-open' );
this.options.open = false; this.options.open = false;