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 >
< script src = "../bootstrap.js" >
2014-08-28 19:16:51 +00:00
$( "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 : "" );
} else {
$( ".shape" ).toggleClass( this.id, $( this ).is( ":checked") );
}
});
$( "[name='brand']").on( "change", function(){
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
});
$( "input" ).filter( ":checked" ).trigger( "change" );
$( ".shape-bar, .brand" ).controlgroup();
$( ".toggles" ).controlgroup({
direction: "vertical"
});
< / 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 >
< input data-background-color = "#0769AD" data-color = "#7ACEF4" data-background-image = "url(images/jquery.png)" type = "radio" name = "brand" id = "brand-jquery" >
< 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 >
< 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" >
< 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" >
< 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" >
< / 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 >
