aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2015-09-16 01:48:23 -0400
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-08 14:02:57 -0400
commit344ce3c87c6bfed785c1c7f2c5c22f6034923743 (patch)
tree664b70c9204ddb2bf3ae6b6365fbc2ec5e136fe0
parent197061be5645fd3e9b521e63ecbd13630612d8c7 (diff)
downloadjquery-ui-344ce3c87c6bfed785c1c7f2c5c22f6034923743.tar.gz
jquery-ui-344ce3c87c6bfed785c1c7f2c5c22f6034923743.zip
Checkboxradio: Address review comments
Diffstat
-rw-r--r--demos/checkboxradio/default.html4
-rw-r--r--demos/checkboxradio/no-icons.html2
-rw-r--r--demos/checkboxradio/product-selector.html63
-rw-r--r--tests/visual/checkboxradio/checkboxradio.html2
-rw-r--r--themes/base/checkboxradio.css2
-rw-r--r--ui/widgets/checkboxradio.js24
6 files changed, 55 insertions, 42 deletions
diff --git a/demos/checkboxradio/default.html b/demos/checkboxradio/default.html
index c8c1a800d..064967c12 100644
--- a/demos/checkboxradio/default.html
+++ b/demos/checkboxradio/default.html
@@ -7,9 +7,7 @@
<link rel="stylesheet" href="../demos.css">
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
- $( "input" ).checkboxradio({
- label: "foo"
- });
+ $( "input" ).checkboxradio();
</script>
</head>
<body>
diff --git a/demos/checkboxradio/no-icons.html b/demos/checkboxradio/no-icons.html
index c738d8ca8..bcff28dcd 100644
--- a/demos/checkboxradio/no-icons.html
+++ b/demos/checkboxradio/no-icons.html
@@ -62,4 +62,4 @@
<p>Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.</p>
</div>
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html
index e8be051dd..c78c51657 100644
--- a/demos/checkboxradio/product-selector.html
+++ b/demos/checkboxradio/product-selector.html
@@ -7,28 +7,45 @@
<link rel="stylesheet" href="../demos.css">
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="controlgroup">
- $( "input" ).checkboxradio();
- $( "[name='shape']").on( "change", function(){
- $( ".shape" ).removeClass( "circle pill square rectangle" )
- .addClass( $( this ).val() );
- });
- $( ".toggle" ).on( "change", function(){
- if ( $( this ).is( ".brand-toggle" ) ) {
- var checked = $( this ).is( ":checked" ),
- value = $( "[name='brand']" ).filter( ":checked" ).attr( "data-" + this.id )
- $( ".shape" ).css( this.id, checked ? value : "" );
+ function handleShape( e ) {
+ $( ".shape" )
+ .removeClass( "circle pill square rectangle" )
+ .addClass( $( e.target ).val() );
+ };
+ function handleToggle( e ) {
+ var target = $( e.target );
+
+ if ( target.is( ".brand-toggle" ) ) {
+ var checked = target.is( ":checked" ),
+ value = $( "[name='brand']" )
+ .filter( ":checked" )
+ .attr( "data-" + target[ 0 ].id )
+ $( ".shape" ).css( target[ 0 ].id, checked ? value : "" );
} else {
- $( ".shape" ).toggleClass( this.id, $( this ).is( ":checked") );
+ $( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") );
}
- });
- $( "[name='brand']").on( "change", function(){
- $( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
- });
- $( "input" ).filter( ":checked" ).trigger( "change" );
+ }
+ function updateBrand() {
+ handleShape( { target: $( "[name='shape']:checked" ) } );
+ $( ".toggle:checked" ).each( function() {
+ handleToggle( { target: $( this ) } );
+ } );
+ }
+
+ // Initalize widgets
+ $( "input" ).checkboxradio();
$( ".shape-bar, .brand" ).controlgroup();
- $( ".toggles" ).controlgroup({
+ $( ".toggles" ).controlgroup( {
direction: "vertical"
- });
+ } );
+
+ // Bind event handlers
+ $( "[name='shape']").on( "change", handleShape );
+ $( ".toggle" ).on( "change", handleToggle );
+ $( "[name='brand']").on( "change", updateBrand );
+
+ // Set initial values
+ updateBrand();
</script>
<style>
.shape {
@@ -74,15 +91,15 @@
<h3>1.) Select a brand</h3>
<div class="brand">
<label for="brand-jquery">jQuery</label>
- <input data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)" type="radio" name="brand" id="brand-jquery">
+ <input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)">
<label for="brand-jquery-ui">jQuery UI</label>
- <input data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" type="radio" name="brand" id="brand-jquery-ui" checked>
+ <input type="radio" name="brand" id="brand-jquery-ui" data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" checked>
<label for="brand-jquery-mobile">jQuery Mobile</label>
- <input data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)" type="radio" name="brand" id="brand-jquery-mobile">
+ <input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)">
<label for="brand-sizzle">Sizzle</label>
- <input data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)" type="radio" name="brand" id="brand-sizzle">
+ <input type="radio" name="brand" id="brand-sizzle" data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)">
<label for="brand-qunit">QUnit</label>
- <input data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)" type="radio" name="brand" id="brand-qunit">
+ <input type="radio" name="brand" id="brand-qunit" data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)">
</div>
</div>
<div class="shape-wrap">
diff --git a/tests/visual/checkboxradio/checkboxradio.html b/tests/visual/checkboxradio/checkboxradio.html
index 634e8df81..a472c9df2 100644
--- a/tests/visual/checkboxradio/checkboxradio.html
+++ b/tests/visual/checkboxradio/checkboxradio.html
@@ -39,7 +39,7 @@
</head>
<body>
<h2>
- Easy way to toggle through various combinations of options and states to make sure non lead to
+ Easy way to toggle through various combinations of options and states to make sure none lead to
a broken appearence.
</h2>
<div class="controls">
diff --git a/themes/base/checkboxradio.css b/themes/base/checkboxradio.css
index b448c2785..a41125e23 100644
--- a/themes/base/checkboxradio.css
+++ b/themes/base/checkboxradio.css
@@ -2,7 +2,7 @@
* jQuery UI Checkboxradio @VERSION
* http://jqueryui.com
*
- * Copyright 2013 jQuery Foundation and other contributors
+ * Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
diff --git a/ui/widgets/checkboxradio.js b/ui/widgets/checkboxradio.js
index 58b637581..13ba9dadf 100644
--- a/ui/widgets/checkboxradio.js
+++ b/ui/widgets/checkboxradio.js
@@ -57,8 +57,6 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
labels = this.element.labels();
- // Todo: For now we will use the last label we need to check about the best
- // way to handle multiple labels with some accessability experts
this.label = $( labels[ labels.length - 1 ] );
if ( !this.label.length ) {
$.error( "No label found for checkboxradio widget" );
@@ -70,8 +68,8 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
// input itself.
this.label.contents().not( this.element ).each( function() {
- // The label contents could be text html or a mix we concat each element to get a string
- // representation of the label without the input as part of it.
+ // The label contents could be text, html, or a mix. We concat each element to get a string
+ // representation of the label, without the input as part of it.
that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML;
} );
@@ -96,7 +94,7 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
this.formParent = this.form.length ? this.form : $( "body" );
if ( this.options.disabled == null ) {
- this.options.disabled = this.element[ 0 ].disabled || false;
+ this.options.disabled = this.element[ 0 ].disabled;
}
this._setOption( "disabled", this.options.disabled );
@@ -121,11 +119,11 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
}
this._on( {
- "change": "_toggleClasses",
- "focus": function() {
+ change: "_toggleClasses",
+ focus: function() {
this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
},
- "blur": function() {
+ blur: function() {
this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
}
} );
@@ -150,15 +148,15 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
},
_getRadioGroup: function() {
- var name = this.element[ 0 ].name,
- that = this,
- radios = $( [] );
+ var name = this.element[ 0 ].name;
+ var formParent = this.formParent[ 0 ];
+ var radios = $( [] );
if ( name ) {
name = $.ui.escapeSelector( name );
radios = this.formParent.find( "[name='" + $.ui.escapeSelector( name ) + "']" ).filter( function() {
var form = $( this ).form();
- return ( form.length ? form : $( "body" ) )[ 0 ] === that.formParent[ 0 ];
+ return ( form.length ? form : $( "body" ) )[ 0 ] === formParent;
} );
}
return radios.not( this.element );
@@ -198,7 +196,7 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
_setOption: function( key, value ) {
- // We don't alow the value to be set to nothing
+ // We don't allow the value to be set to nothing
if ( key === "label" && !value ) {
return;
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 17:54:00 +0000