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

Checkboxradio: Address review comments

Browse Source
This commit is contained in:
Alexander Schmitz 2015-09-16 01:48:23 -04:00
parent 197061be56
commit 344ce3c87c
6 changed files with 55 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/checkboxradio/default.html
View File

@ -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>

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

@ -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>
</html>

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

@ -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">

2
tests/visual/checkboxradio/checkboxradio.html
View File

@ -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">

2
themes/base/checkboxradio.css
View File

@ -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
*

24
ui/widgets/checkboxradio.js
View File

@ -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;
}