2014-08-28 19:16:51 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > jQuery UI Checkboxradio - Product Selector< / title >
< link rel = "stylesheet" href = "../../themes/base/all.css" >
< link rel = "stylesheet" href = "../demos.css" >
2015-01-08 02:51:38 +00:00
< script src = "../../external/requirejs/require.js" > < / script >
2015-08-09 15:47:06 +00:00
< script src = "../bootstrap.js" data-modules = "controlgroup" >
2015-09-16 05:48:23 +00:00
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 : "" );
2014-08-28 19:16:51 +00:00
} else {
2015-09-16 05:48:23 +00:00
$( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") );
2014-08-28 19:16:51 +00:00
}
2015-09-16 05:48:23 +00:00
}
function updateBrand() {
handleShape( { target: $( "[name='shape']:checked" ) } );
$( ".toggle:checked" ).each( function() {
handleToggle( { target: $( this ) } );
} );
}
// Initalize widgets
$( "input" ).checkboxradio();
2014-08-28 19:16:51 +00:00
$( ".shape-bar, .brand" ).controlgroup();
2015-09-16 05:48:23 +00:00
$( ".toggles" ).controlgroup( {
2014-08-28 19:16:51 +00:00
direction: "vertical"
2015-09-16 05:48:23 +00:00
} );
// Bind event handlers
$( "[name='shape']").on( "change", handleShape );
$( ".toggle" ).on( "change", handleToggle );
$( "[name='brand']").on( "change", updateBrand );
// Set initial values
updateBrand();
2014-08-28 19:16:51 +00:00
< / script >
< style >
.shape {
margin-left: 4em;
margin-top: 2.5em;
height: 8em;
width: 8em;
box-shadow: 4px 4px 8px;
color: #ccc;
background-repeat: no-repeat;
background-size: 90%;
background-position: 50%;
}
.circle, .pill {
border-radius: 8em;
}
.pill, .rectangle {
width: 16em;
}
.square, .circle {
margin-left: 9em;
}
.border {
border: 2px solid #333333;
}
.toggles {
width: 200px;
}
.toggle-wrap, .shape {
display: inline-block;
vertical-align: top;
}
.controls {
background: #ccc;
padding: 1em;
display: inline-block;
}
< / style >
< / head >
< body >
< div class = "controls" >
< div class = "brand-wrap" >
< h3 > 1.) Select a brand< / h3 >
< div class = "brand" >
< label for = "brand-jquery" > jQuery< / label >
2015-09-16 05:48:23 +00:00
< input type = "radio" name = "brand" id = "brand-jquery" data-background-color = "#0769AD" data-color = "#7ACEF4" data-background-image = "url(images/jquery.png)" >
2014-08-28 19:16:51 +00:00
< label for = "brand-jquery-ui" > jQuery UI< / label >
2015-09-16 05:48:23 +00:00
< 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 >
2014-08-28 19:16:51 +00:00
< label for = "brand-jquery-mobile" > jQuery Mobile< / label >
2015-09-16 05:48:23 +00:00
< input type = "radio" name = "brand" id = "brand-jquery-mobile" data-background-color = "#108040" data-color = "#3EB249" data-background-image = "url(images/jquery-mobile.png)" >
2014-08-28 19:16:51 +00:00
< label for = "brand-sizzle" > Sizzle< / label >
2015-09-16 05:48:23 +00:00
< input type = "radio" name = "brand" id = "brand-sizzle" data-background-color = "#9A1B1E" data-color = "#FAA523" data-background-image = "url(images/sizzle.png)" >
2014-08-28 19:16:51 +00:00
< label for = "brand-qunit" > QUnit< / label >
2015-09-16 05:48:23 +00:00
< input type = "radio" name = "brand" id = "brand-qunit" data-background-color = "#390F39" data-color = "#9C3493" data-background-image = "url(images/qunit.png)" >
2014-08-28 19:16:51 +00:00
< / div >
< / div >
< div class = "shape-wrap" >
< h3 > 2.) Select a shape< / h3 >
< div class = "shape-bar" >
< label for = "shape-circle" > Circle< / label >
< input type = "radio" name = "shape" id = "shape-circle" value = "circle" checked >
< label for = "shape-square" > Square< / label >
< input type = "radio" name = "shape" id = "shape-square" value = "square" >
< label for = "shape-pill" > Pill< / label >
< input type = "radio" name = "shape" id = "shape-pill" value = "pill" >
< label for = "shape-rectangle" > Rectangle< / label >
< input type = "radio" name = "shape" id = "shape-rectangle" value = "rectangle" >
< / div >
< / div >
< div class = "toggle-wrap" >
< h3 > 3.) Customize< / h3 >
< div class = "toggles" >
< label for = "color" > Shadow< / label >
< input class = "toggle brand-toggle" type = "checkbox" name = "color" id = "color" >
< label for = "border" > Border< / label >
< input class = "toggle" type = "checkbox" name = "border" id = "border" >
< label for = "background-color" > Background< / label >
< input class = "toggle brand-toggle" type = "checkbox" name = "background-color" id = "background-color" checked >
< label for = "background-image" > Background Image< / label >
< input class = "toggle brand-toggle" type = "checkbox" name = "background-image" id = "background-image" checked >
< / div >
< / div >
< div class = "shape circle background jquery-ui" > < / div >
< / div >
< div class = "demo-description" >
< p > Using two sets of radio buttons, as horizontal controlgroups, and one group of checkboxes, as a vertical controlgroup, to implement a product selector.< / p >
< / div >
< / body >
< / html >
