<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 {
<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">
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" );
// 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;
} );
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 );
}
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" );
}
} );
},
_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 );
_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;
}
projects / jquery-ui.git / commitdiff