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

Spinner: Updates for new button widget and classes option

Browse Source
This commit is contained in:
Alexander Schmitz 2015-01-07 21:51:38 -05:00
parent 9f7f0a4279
commit 16abde399d
19 changed files with 39 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demos/button/default.html
View File

@ -5,18 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Default functionality</title> <title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script src="../../external/requirejs/require.js"></script>
$( function() { <script src="../bootstrap.js">
$( ".widget input[type=submit], .widget a, .widget button" ).button(); $( ".widget input[type=submit], .widget a, .widget button" ).button();
$( "button, input, a" ).click( function( event ) { $( "button, input, a" ).click( function( event ) {
event.preventDefault(); event.preventDefault();
} ); } );
} );
</script> </script>
</head> </head>
<body> <body>

10
demos/button/icons.html
View File

@ -5,13 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Icons</title> <title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script src="../../external/requirejs/require.js"></script>
$( function() { <script src="../bootstrap.js">
$( ".widget button" ).first() $( ".widget button" ).first()
.button() .button()
.next().button( { .next().button( {
@ -29,7 +25,6 @@
icon: "ui-icon-gear", icon: "ui-icon-gear",
iconPosition: "bottom" iconPosition: "bottom"
} ); } );
} );
</script> </script>
</head> </head>
<body> <body>
@ -41,7 +36,6 @@
<button>Button with icon on the right</button> <button>Button with icon on the right</button>
<button>Button with icon on the top</button> <button>Button with icon on the top</button>
<button>Button with icon on the bottom</button> <button>Button with icon on the bottom</button>
<button>Button with icon on the top</button>
</div> </div>
<div class="css"> <div class="css">
<h1>CSS</h1> <h1>CSS</h1>

70
demos/button/splitbutton.html
View File

@ -1,70 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Split button</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-menu { position: absolute; width: 100px; }
</style>
<script>
$(function() {
$( "#rerun" )
.button()
.on( "click", function() {
alert( "Running the last action" );
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.on( "click", function() {
var menu = $( this ).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$( document ).one( "click", function() {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
</head>
<body>
<div>
<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
</div>
<ul>
<li><div>Open...</div></li>
<li><div>Save</div></li>
<li><div>Delete</div></li>
</ul>
</div>
<div class="demo-description">
<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
and no text. Both are grouped together in a set.</p>
</div>
</body>
</html>

115
demos/button/toolbar.html
View File

@ -1,115 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Toolbar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
</style>
<script>
$(function() {
$( "#beginning" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#rewind" ).button({
text: false,
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#play" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
})
.on( "click", function() {
var options;
if ( $( this ).text() === "play" ) {
options = {
label: "pause",
icons: {
primary: "ui-icon-pause"
}
};
} else {
options = {
label: "play",
icons: {
primary: "ui-icon-play"
}
};
}
$( this ).button( "option", options );
});
$( "#stop" ).button({
text: false,
icons: {
primary: "ui-icon-stop"
}
})
.on( "click", function() {
$( "#play" ).button( "option", {
label: "play",
icons: {
primary: "ui-icon-play"
}
});
});
$( "#forward" ).button({
text: false,
icons: {
primary: "ui-icon-seek-next"
}
});
$( "#end" ).button({
text: false,
icons: {
primary: "ui-icon-seek-end"
}
});
$( "#shuffle" ).button();
$( "#repeat" ).buttonset();
});
</script>
</head>
<body>
<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">go to beginning</button>
<button id="rewind">rewind</button>
<button id="play">play</button>
<button id="stop">stop</button>
<button id="forward">fast forward</button>
<button id="end">go to end</button>
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
<span id="repeat">
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</span>
</div>
<div class="demo-description">
<p>
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
</p>
</div>
</body>
</html>

9
demos/checkboxradio/default.html
View File

@ -4,17 +4,12 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Checkboxradio - Default functionality</title> <title>jQuery UI Checkboxradio - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/checkboxradio.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "input" ).checkboxradio({ $( "input" ).checkboxradio({
label: "foo" label: "foo"
}); });
});
</script> </script>
</head> </head>
<body> <body>

9
demos/checkboxradio/no-icons.html
View File

@ -4,17 +4,12 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Checkboxradio - No Icons</title> <title>jQuery UI Checkboxradio - No Icons</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/checkboxradio.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "input" ).checkboxradio({ $( "input" ).checkboxradio({
icon: false icon: false
}); });
});
</script> </script>
</head> </head>
<body> <body>

10
demos/checkboxradio/product-selector.html
View File

@ -4,14 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Checkboxradio - Product Selector</title> <title>jQuery UI Checkboxradio - Product Selector</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/checkboxradio.js"></script>
<script src="../../ui/controlgroup.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "input" ).checkboxradio(); $( "input" ).checkboxradio();
$( "[name='shape']").on( "change", function(){ $( "[name='shape']").on( "change", function(){
$( ".shape" ).removeClass( "circle pill square rectangle" ) $( ".shape" ).removeClass( "circle pill square rectangle" )
@ -34,7 +29,6 @@
$( ".toggles" ).controlgroup({ $( ".toggles" ).controlgroup({
direction: "vertical" direction: "vertical"
}); });
});
</script> </script>
<style> <style>
.shape { .shape {

10
demos/checkboxradio/radiogroup.html
View File

@ -4,17 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Checkboxradio - Radio Group</title> <title>jQuery UI Checkboxradio - Radio Group</title>
<link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/checkboxradio.js"></script>
<script src="../../ui/controlgroup.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<script> <script src="../../external/requirejs/require.js"></script>
$(function() { <script src="../bootstrap.js">
$( "input" ).checkboxradio(); $( "input" ).checkboxradio();
$( "fieldset" ).controlgroup(); $( "fieldset" ).controlgroup();
});
</script> </script>
</head> </head>
<body> <body>

2
tests/unit/button/common-deprecated.js
View File

@ -1,6 +1,6 @@
define( [ define( [
"lib/common", "lib/common",
"ui/button" "ui/widgets/button"
], function( common ) { ], function( common ) {
common.testWidget( "button", { common.testWidget( "button", {

1
tests/unit/button/core.js
View File

@ -1,5 +1,6 @@
define( [ define( [
"jquery", "jquery",
"ui/safe-active-element",
"ui/widgets/button" "ui/widgets/button"
], function( $ ) { ], function( $ ) {

2
tests/unit/button/deprecated.js
View File

@ -1,6 +1,6 @@
define( [ define( [
"jquery", "jquery",
"ui/button" "ui/widgets/button"
], function( $ ) { ], function( $ ) {
module( "Button (deprecated): core" ); module( "Button (deprecated): core" );

2
tests/unit/checkboxradio/common.js
View File

@ -1,6 +1,6 @@
define( [ define( [
"lib/common", "lib/common",
"ui/checkboxradio" "ui/widgets/checkboxradio"
], function( common ) { ], function( common ) {
common.testWidget( "checkboxradio", { common.testWidget( "checkboxradio", {

2
tests/unit/checkboxradio/core.js
View File

@ -1,6 +1,6 @@
define( [ define( [
"jquery", "jquery",
"ui/checkboxradio" "ui/widgets/checkboxradio"
], function( $ ) { ], function( $ ) {
module( "Checkboxradio: core" ); module( "Checkboxradio: core" );

72
tests/unit/checkboxradio/events.js
View File

@ -1,80 +1,10 @@
define( [ define( [
"jquery", "jquery",
"ui/checkboxradio" "ui/widgets/checkboxradio"
], function( $ ) { ], function( $ ) {
module( "Checkboxradio: events" ); module( "Checkboxradio: events" );
asyncTest( "form reset / click", function( assert ) {
expect( 35 );
var radios = [
$( "#radio11" ).checkboxradio(),
$( "#radio12" ).checkboxradio(),
$( "#radio13" ).checkboxradio()
],
widgets = [
radios[ 0 ].checkboxradio( "widget" ),
radios[ 1 ].checkboxradio( "widget" ),
radios[ 2 ].checkboxradio( "widget" )
],
form1 = $( "#form1" ),
form2 = $( "#form2" );
// Checkes that only the specified radio is checked in the group
function assertChecked( checked ) {
$.each( widgets, function( index ) {
var method = index === checked ? "hasClasses" : "lacksClasses";
assert[ method ]( widgets[ index ], "ui-checkboxradio-checked ui-state-active" );
} );
}
// Checks the form count on each form
function assertFormCount( count ) {
equal( form1.data( "uiCheckboxradioCount" ), count, "Form1 has a count of " + count );
equal( form2.data( "uiCheckboxradioCount" ), 3, "Form2 has a count of 3" );
}
// Run the tests
function testForms( current, start ) {
assertChecked( 2 );
if ( !start && current !== 0 ) {
radios[ current - 1 ].checkboxradio( "destroy" );
}
assertFormCount( 3 - current );
radios[ current ].prop( "checked", true );
radios[ current ].trigger( "change" );
assertChecked( current );
form1.trigger( "reset" );
}
// Recoursivly run the tests in a setTimeout with call back for the resets
function iterate( i ) {
setTimeout( function() {
if ( i < 3 ) {
testForms( i );
iterate( i + 1 );
return;
}
radios[ 2 ].checkboxradio( "destroy" );
assertChecked( false );
start();
} );
}
$( "#form2 input" ).checkboxradio();
// Check the starting state then kick everything off
testForms( 0, true );
iterate( 0 );
} );
asyncTest( asyncTest(
"Resetting a checkbox's form should refresh the visual state of the checkbox", "Resetting a checkbox's form should refresh the visual state of the checkbox",
function( assert ) { function( assert ) {

2
tests/unit/checkboxradio/methods.js
View File

@ -1,6 +1,6 @@
define( [ define( [
"jquery", "jquery",
"ui/checkboxradio" "ui/widgets/checkboxradio"
], function( $ ) { ], function( $ ) {
module( "Checkboxradio: methods" ); module( "Checkboxradio: methods" );

2
tests/unit/checkboxradio/options.js
View File

@ -1,6 +1,6 @@
define( [ define( [
"jquery", "jquery",
"ui/checkboxradio" "ui/widgets/checkboxradio"
], function( $ ) { ], function( $ ) {
module( "Checkboxradio: options" ); module( "Checkboxradio: options" );

3
ui/widgets/button.js
View File

@ -12,8 +12,7 @@
//>>description: Enhances a form with themeable buttons. //>>description: Enhances a form with themeable buttons.
//>>docs: http://api.jqueryui.com/button/ //>>docs: http://api.jqueryui.com/button/
//>>demos: http://jqueryui.com/button/ //>>demos: http://jqueryui.com/button/
//>>css.structure: ../themes/base/core.css //>>css.structure: ../themes/base/core.css, ../themes/base/button.css
//>>css.structure: ../themes/base/button.css
//>>css.theme: ../themes/base/theme.css //>>css.theme: ../themes/base/theme.css
( function( factory ) { ( function( factory ) {

46
ui/checkboxradio.js → ui/widgets/checkboxradio.js
View File

@ -14,8 +14,10 @@
// AMD. Register as an anonymous module. // AMD. Register as an anonymous module.
define( [ define( [
"jquery", "jquery",
"./core", "../escape-selector",
"./widget" "../form-reset-mixin",
"../labels",
"../widget"
], factory ); ], factory );
} else { } else {
@ -24,19 +26,7 @@
} }
}( function( $ ) { }( function( $ ) {
// Remove and replace with reset handler extension $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
var formResetHandler = function() {
var form = $( this );
// Wait for the form reset to actually happen before refreshing
setTimeout( function() {
// We dont filter for css only versions since css only is not supported
form.find( ".ui-checkboxradio" ).checkboxradio( "refresh" );
} );
};
$.widget( "ui.checkboxradio", {
version: "@VERSION", version: "@VERSION",
options: { options: {
disabled: null, disabled: null,
@ -91,20 +81,12 @@ $.widget( "ui.checkboxradio", {
}, },
_create: function() { _create: function() {
var formCount, var checked = this.element[ 0 ].checked;
checked = this.element[ 0 ].checked,
form = this.element.form();
this.formParent = !!form.length ? form : $( "body" );
formCount = this.formParent.data( "uiCheckboxradioCount" ) || 0; this._bindFormResetHandler();
// We don't use _on and _off here because we want all the checkboxes in the same form to use // this.form is set by the form-reset-mixin
// single handler which handles all the checkboxradio widgets in the form this.formParent = this.form.length ? this.form : $( "body" );
if ( formCount === 0 ) {
this.formParent.on( "reset." + this.widgetFullName, formResetHandler );
}
this.formParent.data( "uiCheckboxradioCount", formCount + 1 );
if ( this.options.disabled == null ) { if ( this.options.disabled == null ) {
this.options.disabled = this.element[ 0 ].disabled || false; this.options.disabled = this.element[ 0 ].disabled || false;
@ -199,13 +181,7 @@ $.widget( "ui.checkboxradio", {
}, },
_destroy: function() { _destroy: function() {
var formCount = this.formParent.data( "uiCheckboxradioCount" ) - 1; this._unbindFormResetHandler();
this.formParent.data( "uiCheckboxradioCount", formCount );
if ( formCount === 0 ) {
this.formParent.off( "reset." + this.widgetFullName, formResetHandler );
}
if ( this.icon ) { if ( this.icon ) {
this.icon.remove(); this.icon.remove();
@ -282,7 +258,7 @@ $.widget( "ui.checkboxradio", {
} }
} }
} ); } ] );
return $.ui.checkboxradio; return $.ui.checkboxradio;

12
ui/widgets/spinner.js
View File

@ -250,17 +250,19 @@ $.widget( "ui.spinner", {
// Button bindings // Button bindings
this.buttons = this.uiSpinner.children( "a" ) this.buttons = this.uiSpinner.children( "a" )
.attr( "tabIndex", -1 ) .attr( "tabIndex", -1 )
.button(); .button( {
classes: {
"ui-button": ""
}
} );
// TODO: Right now button does not support classes this is already updated in button PR // TODO: Right now button does not support classes this is already updated in button PR
this._removeClass( this.buttons, "ui-corner-all" ); this._removeClass( this.buttons, "ui-corner-all" );
this._addClass( this.buttons.first(), "ui-spinner-button ui-spinner-up" ); this._addClass( this.buttons.first(), "ui-spinner-button ui-spinner-up" );
this._addClass( this.buttons.last(), "ui-spinner-button ui-spinner-down" ); this._addClass( this.buttons.last(), "ui-spinner-button ui-spinner-down" );
this._addClass( this.buttons.first().find( ".ui-button-text span" ), null, this.buttons.first().button( "option", "icon", this.options.icons.up );
"ui-icon " + this.options.icons.up ); this.buttons.last().button( "option", "icon", this.options.icons.down );
this._addClass( this.buttons.last().find( ".ui-button-text span" ), null,
"ui-icon " + this.options.icons.down );
// IE 6 doesn't understand height: 50% for the buttons // IE 6 doesn't understand height: 50% for the buttons
// unless the wrapper has an explicit height // unless the wrapper has an explicit height