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

Controlgroup: fixup for spinner and label

Browse Source
This commit is contained in:
Alexander Schmitz 2015-08-14 09:49:48 -04:00
parent 6c1390dc0d
commit 3330634c4e
4 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demos/controlgroup/default.html
View File

@ -16,8 +16,8 @@
#car-type-button {
width: 120px;
}
.ui-controlgroup-horizontal .ui-spinner {
width: 50px;
.ui-controlgroup-horizontal .ui-spinner-input {
width: 20px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
@ -26,6 +26,7 @@
$( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical"
});
$( ".button" ).button();
</script>
</head>
<body>
@ -33,6 +34,7 @@
<h1>Controlgroup</h1>
<fieldset>
<legend>Rental Car</legend>
<button class="button">button</button>
<div class="controlgroup">
<select id="car-type">
<option>Compact car</option>

4
tests/unit/controlgroup/common.js
View File

@ -12,7 +12,9 @@ common.testWidget( "controlgroup", {
items: {
"button": "input[type=button], input[type=submit], input[type=reset], button, a",
"checkboxradio": "input[type='checkbox'], input[type='radio']",
"selectmenu": "select"
"selectmenu": "select",
"spinner": ".ui-spinner-input",
"controlgroupLabel": ".ui-controlgroup-label"
},
direction: "horizontal",
excludeInvisible: true,

6
themes/base/controlgroup.css
View File

@ -11,6 +11,7 @@
.ui-controlgroup {
vertical-align: middle;
display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
float: left;
@ -31,8 +32,9 @@
.ui-controlgroup-vertical .ui-controlgroup-item {
box-sizing: border-box;
}
.ui-controlgroup-label {
padding: .4em 1em;
.ui-controlgroup .ui-controlgroup-label {
font-size: .83em;
padding: .6em 1em;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
border-left: none;

25
ui/widgets/controlgroup.js
View File

@ -80,25 +80,25 @@ return $.widget( "ui.controlgroup", {
// Make sure the widget actually exists and has a selector set
if ( $.fn[ widget ] && selector ) {
// Find instances of this widget inside controlgroup and run method or set options
// Find instances of this widget inside controlgroup and set options
widgets = that.element.find( selector )[ widget ]( options );
// Don't set data or add to the collection if the method is destroy
widgets.each( function() {
var element = $( this );
var element = $( this ),
// Set data on the widget element pointing to the this.element of the widget
// and telling us what type of widget this is
var widgetElement =
element[ widget ]( "widget" ).data( "ui-controlgroup-data", element.data( "ui-" +
widget.charAt(0).toUpperCase() + widget.slice(1) ) );
widgetElement = element[ widget ]( "widget" ).data(
"ui-controlgroup-data",
element.data( "ui-" + widget.charAt(0).toUpperCase() + widget.slice(1) )
);
childWidgets.push( widgetElement[ 0 ] );
} );
} else if ( selector && widget === "controlgroupLabel" ) {
labels = that.element.find( selector );
that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
Array.prototype.push.apply( childWidgets, labels );
Array.prototype.push.apply( childWidgets, labels.get() );
}
} );
@ -116,6 +116,15 @@ return $.widget( "ui.controlgroup", {
} );
},
_updateCornerClass: function( element, position ) {
var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right",
add =
this._buildSimpleOptions( position, this.options.direction, "label" ).classes.label;
this._removeClass( element, null, remove );
this._addClass( element, null, add );
},
_buildSimpleOptions: function( position, direction, key ) {
var result = {
classes: {}
@ -217,6 +226,8 @@ return $.widget( "ui.controlgroup", {
that.options.direction === "vertical"
)
);
} else {
that._updateCornerClass( children[ value ](), value );
}
} );