mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Selectmenu: update to use button css
This ensures consistency between different form elements
This commit is contained in:
Alexander Schmitz
parent
897ec38e63
commit
9f7f0a4279
@ -6,7 +6,7 @@ define( [
|
||||
module( "selectmenu: core" );
|
||||
|
||||
test( "markup structure", function( assert ) {
|
||||
expect( 4 );
|
||||
expect( 5 );
|
||||
|
||||
var element = $( "#files" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
@ -16,6 +16,7 @@ test( "markup structure", function( assert ) {
|
||||
assert.hasClasses( button,
|
||||
"ui-selectmenu-button ui-selectmenu-button-closed ui-widget" );
|
||||
assert.lacksClasses( button, "ui-selectmenu-button-open" );
|
||||
assert.lacksClasses( button, "ui-selectmenu-open" );
|
||||
assert.hasClasses( menuWrap, "ui-selectmenu-menu" );
|
||||
assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" );
|
||||
} );
|
||||
@ -89,7 +90,7 @@ test( "_renderButtonItem()", function() {
|
||||
element.selectmenu( "refresh" );
|
||||
option = element.find( "option:selected" );
|
||||
equal(
|
||||
option.text() + element[ 0 ].selectedIndex,
|
||||
" " + option.text() + element[ 0 ].selectedIndex,
|
||||
button.text(),
|
||||
"refresh: button item text"
|
||||
);
|
||||
@ -98,7 +99,7 @@ test( "_renderButtonItem()", function() {
|
||||
menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" );
|
||||
option = element.find( "option" ).last();
|
||||
equal(
|
||||
option.text() + element[ 0 ].selectedIndex,
|
||||
" " + option.text() + element[ 0 ].selectedIndex,
|
||||
button.text(),
|
||||
"click: button item text"
|
||||
);
|
||||
@ -146,7 +147,7 @@ $.each( [
|
||||
selected.val(),
|
||||
"original select state"
|
||||
);
|
||||
equal( button.text(), selected.text(), "button text" );
|
||||
equal( button.text(), " " + selected.text(), "button text" );
|
||||
start();
|
||||
} );
|
||||
} );
|
||||
@ -181,7 +182,7 @@ $.each( [
|
||||
selected.val(),
|
||||
"original select state"
|
||||
);
|
||||
equal( button.text(), selected.text(), "button text" );
|
||||
equal( button.text(), " " + selected.text(), "button text" );
|
||||
start();
|
||||
}, 1 );
|
||||
} );
|
||||
@ -222,7 +223,7 @@ $.each( [
|
||||
"button aria-activedescendant" );
|
||||
equal( element.find( "option:selected" ).val(), options.eq( 1 ).val(),
|
||||
"original select state" );
|
||||
equal( button.text(), options.eq( 1 ).text(), "button text" );
|
||||
equal( button.text(), " " + options.eq( 1 ).text(), "button text" );
|
||||
start();
|
||||
} );
|
||||
} );
|
||||
|
||||
@ -81,21 +81,21 @@ asyncTest( "refresh - change selected option", function() {
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" );
|
||||
|
||||
equal( element.find( "option:selected" ).text(), button.text(), "button text after init" );
|
||||
equal( button.text(), " Medium", "button text after init" );
|
||||
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout( function() {
|
||||
equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" );
|
||||
equal( button.text(), " Medium", "button text after focus" );
|
||||
|
||||
element[ 0 ].selectedIndex = 0;
|
||||
element.selectmenu( "refresh" );
|
||||
equal( element.find( "option:selected" ).text(), button.text(),
|
||||
"button text after changing selected option" );
|
||||
equal( button.text(), " Slower", "button text after changing selected option" );
|
||||
|
||||
element.find( "option" ).prop( "selected", false );
|
||||
element.append( "<option selected value=\"selected_option\">Selected option</option>" );
|
||||
element.selectmenu( "refresh" );
|
||||
equal( "Selected option", button.text(), "button text after adding selected option" );
|
||||
equal( button.text(), " Selected option", "button text after adding selected option" );
|
||||
|
||||
start();
|
||||
} );
|
||||
@ -180,7 +180,7 @@ test( "widget and menuWidget", function( assert ) {
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
equal( button.length, 1, "button: one element" );
|
||||
assert.hasClasses( button, "ui-selectmenu-button" );
|
||||
assert.hasClasses( button, "ui-button" );
|
||||
|
||||
equal( menu.length, 1, "Menu Widget: one element" );
|
||||
ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" );
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Selectmenu Test Suite</title>
|
||||
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../lib/css.js" data-modules="core menu selectmenu"></script>
|
||||
<script src="../../lib/css.js" data-modules="core menu selectmenu button"></script>
|
||||
<script src="../../lib/bootstrap.js" data-widget="selectmenu"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -33,27 +33,10 @@
|
||||
.ui-selectmenu-open {
|
||||
display: block;
|
||||
}
|
||||
.ui-selectmenu-button {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
width: 14em;
|
||||
}
|
||||
.ui-selectmenu-button span.ui-icon {
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
margin-top: -8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
.ui-selectmenu-button span.ui-selectmenu-text {
|
||||
.ui-selectmenu-button.ui-button {
|
||||
text-align: left;
|
||||
padding: 0.4em 2.1em 0.4em 1em;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 14em;
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
//>>docs: http://api.jqueryui.com/selectmenu/
|
||||
//>>demos: http://jqueryui.com/selectmenu/
|
||||
//>>css.structure: ../themes/base/core.css
|
||||
//>>css.structure: ../themes/base/selectmenu.css
|
||||
//>>css.structure: ../themes/base/selectmenu.css, ../themes/base/button.css
|
||||
//>>css.theme: ../themes/base/theme.css
|
||||
|
||||
( function( factory ) {
|
||||
@ -82,7 +82,7 @@ return $.widget( "ui.selectmenu", {
|
||||
},
|
||||
|
||||
_drawButton: function() {
|
||||
var icon,
|
||||
var icon, space,
|
||||
that = this,
|
||||
item = this._parseOption(
|
||||
this.element.find( "option:selected" ),
|
||||
@ -115,10 +115,13 @@ return $.widget( "ui.selectmenu", {
|
||||
.insertAfter( this.element );
|
||||
|
||||
this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
|
||||
"ui-widget ui-state-default" );
|
||||
"ui-button ui-widget" );
|
||||
|
||||
icon = $( "<span>" ).prependTo( this.button );
|
||||
space = $( "<span> </span>" );
|
||||
this._addClass( space, "ui-selectmenu-icon-space" );
|
||||
this._addClass( icon, null, "ui-icon " + this.options.icons.button );
|
||||
icon.after( space );
|
||||
|
||||
this.buttonItem = this._renderButtonItem( item )
|
||||
.appendTo( this.button );
|
||||
@ -136,8 +139,6 @@ return $.widget( "ui.selectmenu", {
|
||||
that._refreshMenu();
|
||||
}
|
||||
} );
|
||||
this._hoverable( this.button );
|
||||
this._focusable( this.button );
|
||||
},
|
||||
|
||||
_drawMenu: function() {
|
||||
@ -606,7 +607,7 @@ return $.widget( "ui.selectmenu", {
|
||||
// we always remove classes first and add them second, otherwise if both classes have the
|
||||
// same theme class, it will be removed after we add it.
|
||||
this._removeClass( this.button, "ui-selectmenu-button-" +
|
||||
( this.isOpen ? "closed" : "open" ) )
|
||||
( this.isOpen ? "closed" : "open" ) )
|
||||
._addClass( this.button, "ui-selectmenu-button-" +
|
||||
( this.isOpen ? "open" : "closed" ) )
|
||||
._toggleClass( this.menuWrap, "ui-selectmenu-open", null, this.isOpen );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user