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

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

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

6
themes/base/controlgroup.css
View File

@ -11,6 +11,7 @@
.ui-controlgroup { .ui-controlgroup {
vertical-align: middle; vertical-align: middle;
display: inline-block;
} }
.ui-controlgroup > .ui-controlgroup-item { .ui-controlgroup > .ui-controlgroup-item {
float: left; float: left;
@ -31,8 +32,9 @@
.ui-controlgroup-vertical .ui-controlgroup-item { .ui-controlgroup-vertical .ui-controlgroup-item {
box-sizing: border-box; box-sizing: border-box;
} }
.ui-controlgroup-label { .ui-controlgroup .ui-controlgroup-label {
padding: .4em 1em; font-size: .83em;
padding: .6em 1em;
} }
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
border-left: none; 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 // Make sure the widget actually exists and has a selector set
if ( $.fn[ widget ] && selector ) { 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 ); widgets = that.element.find( selector )[ widget ]( options );
// Don't set data or add to the collection if the method is destroy
widgets.each( function() { widgets.each( function() {
var element = $( this ); var element = $( this ),
// Set data on the widget element pointing to the this.element of the widget // Set data on the widget element pointing to the this.element of the widget
// and telling us what type of widget this is // and telling us what type of widget this is
var widgetElement = widgetElement = element[ widget ]( "widget" ).data(
element[ widget ]( "widget" ).data( "ui-controlgroup-data", element.data( "ui-" + "ui-controlgroup-data",
widget.charAt(0).toUpperCase() + widget.slice(1) ) ); element.data( "ui-" + widget.charAt(0).toUpperCase() + widget.slice(1) )
);
childWidgets.push( widgetElement[ 0 ] ); childWidgets.push( widgetElement[ 0 ] );
} ); } );
} else if ( selector && widget === "controlgroupLabel" ) { } else if ( selector && widget === "controlgroupLabel" ) {
labels = that.element.find( selector ); labels = that.element.find( selector );
that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" ); 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 ) { _buildSimpleOptions: function( position, direction, key ) {
var result = { var result = {
classes: {} classes: {}
@ -217,6 +226,8 @@ return $.widget( "ui.controlgroup", {
that.options.direction === "vertical" that.options.direction === "vertical"
) )
); );
} else {
that._updateCornerClass( children[ value ](), value );
} }
} ); } );