library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Selectmenu: make dropdown style default and remove option dropdown

Browse Source
This commit is contained in:
Felix Nagel 2012-12-20 00:10:06 +01:00
parent 2ab514fcd6
commit a787d52d4a
3 changed files with 12 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demos/selectmenu/custom_render.html
View File

@ -38,14 +38,10 @@
} }
}); });
var files = $( "select#files" ).iconselectmenu({ var files = $( "select#files" ).iconselectmenu();
dropdown: false
});
files.iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons" ); files.iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons" );
var filesB = $( "select#filesB" ).iconselectmenu({ var filesB = $( "select#filesB" ).iconselectmenu();
dropdown: false
});
filesB.iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons customicons" ); filesB.iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons customicons" );
var peopleA = $( "select#peopleA" ).iconselectmenu(); var peopleA = $( "select#peopleA" ).iconselectmenu();

4
demos/selectmenu/default.html
View File

@ -17,9 +17,7 @@
$('#files').selectmenu(); $('#files').selectmenu();
var withOverflow = $('#number').selectmenu({ var withOverflow = $('#number').selectmenu();
dropdown: false
});
withOverflow.selectmenu("menuWidget").addClass("overflow"); withOverflow.selectmenu("menuWidget").addClass("overflow");
}); });
</script> </script>

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

@ -21,16 +21,14 @@ $.widget( "ui.selectmenu", {
defaultElement: "<select>", defaultElement: "<select>",
options: { options: {
appendTo: null, appendTo: null,
dropdown: true, icons: {
button: "ui-icon-triangle-1-s"
},
position: { position: {
my: "left top", my: "left top",
at: "left bottom", at: "left bottom",
collision: "none" collision: "none"
}, },
icons: {
dropdown: "ui-icon-triangle-1-s",
popup: "ui-icon-triangle-2-n-s"
},
// callbacks // callbacks
change: null, change: null,
@ -84,7 +82,7 @@ $.widget( "ui.selectmenu", {
}); });
this.button.prepend( $( "<span>", { this.button.prepend( $( "<span>", {
"class": "ui-icon " + ( this.options.dropdown ? this.options.icons.dropdown : this.options.icons.popup ) "class": "ui-icon " + this.options.icons.button
})); }));
this.buttonText = $( "<span>", { this.buttonText = $( "<span>", {
@ -119,7 +117,7 @@ $.widget( "ui.selectmenu", {
// wrap menu // wrap menu
this.menuWrap = $( "<div>", { this.menuWrap = $( "<div>", {
"class": "ui-selectmenu-menu", "class": "ui-selectmenu-menu",
width: ( this.options.dropdown ) ? this.button.outerWidth() : this.buttonText.width() + parseFloat( this.buttonText.css( "padding-left" ) ) || 0 + parseFloat( this.buttonText.css( "margin-left") ) || 0 width: this.button.outerWidth()
}) })
.append( this.menu ) .append( this.menu )
.appendTo( this._appendTo() ); .appendTo( this._appendTo() );
@ -155,10 +153,8 @@ $.widget( "ui.selectmenu", {
}) })
.data( "ui-menu" ); .data( "ui-menu" );
// dropdown style needs border on bottom only // adjust border radius
if ( this.options.dropdown ) { this.menu.addClass( "ui-corner-bottom" ).removeClass( "ui-corner-all" );
this.menu.addClass( "ui-corner-bottom" ).removeClass( "ui-corner-all" );
}
// make sure focus stays on selected item // make sure focus stays on selected item
menuInstance.delay = 999999999; menuInstance.delay = 999999999;
@ -194,28 +190,9 @@ $.widget( "ui.selectmenu", {
return; return;
} }
var currentItem,
_position = {
of: this.button
};
this.isOpen = true; this.isOpen = true;
this._toggleAttr(); this._toggleAttr();
this.menuWrap.position( $.extend( {}, this.options.position, { of: this.button } ) );
// do not change position if non default position options are set (needed for custom positioned popup menus)
if ( this.items && !this.options.dropdown && this.options.position.my === "left top" && this.options.position.at === "left bottom" ) {
currentItem = this._getSelectedItem();
// center current item
if ( this.menu.outerHeight() < this.menu.prop( "scrollHeight" ) ) {
this.menuWrap.css( "left" , -10000 );
this.menu.scrollTop( this.menu.scrollTop() + currentItem.position().top - this.menu.outerHeight() / 2 + currentItem.outerHeight() / 2 );
this.menuWrap.css( "left" , "auto" );
}
_position.my = "left top" + ( this.menu.offset().top - currentItem.offset().top + ( this.button.outerHeight() - currentItem.outerHeight() ) / 2 );
_position.at = "left top";
}
this.menuWrap.position( $.extend( {}, this.options.position, _position ) );
this._trigger( "open", event ); this._trigger( "open", event );
}, },
@ -444,9 +421,7 @@ $.widget( "ui.selectmenu", {
}, },
_toggleAttr: function(){ _toggleAttr: function(){
if ( this.options.dropdown ) { this.button.toggleClass( "ui-corner-top", this.isOpen ).toggleClass( "ui-corner-all", !this.isOpen );
this.button.toggleClass( "ui-corner-top", this.isOpen ).toggleClass( "ui-corner-all", !this.isOpen );
}
this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen ); this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen );
this.menu.attr( "aria-hidden", !this.isOpen); this.menu.attr( "aria-hidden", !this.isOpen);
this.button.attr( "aria-expanded", this.isOpen); this.button.attr( "aria-expanded", this.isOpen);