diff options
| -rw-r--r-- | demos/checkboxradio/default.html | 4 | ||||
| -rw-r--r-- | demos/checkboxradio/no-icons.html | 2 | ||||
| -rw-r--r-- | demos/checkboxradio/product-selector.html | 63 | ||||
| -rw-r--r-- | tests/visual/checkboxradio/checkboxradio.html | 2 | ||||
| -rw-r--r-- | themes/base/checkboxradio.css | 2 | ||||
| -rw-r--r-- | ui/widgets/checkboxradio.js | 24 |
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; } |