diff options
| author | Alexander Schmitz <arschmitz@gmail.com> | 2014-08-28 15:16:51 -0400 |
|---|---|---|
| committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-10-07 10:57:59 -0400 |
| commit | 25d0c857188c19347c869f803530289762199f92 (patch) | |
| tree | 768afcbc456f878fb35e96546f468f9ffaa46b80 /demos/checkboxradio/product-selector.html | |
| parent | 02033262ee0fb1d9f33c361b3c2ddfa168604854 (diff) | |
| download | jquery-ui-25d0c857188c19347c869f803530289762199f92.tar.gz jquery-ui-25d0c857188c19347c869f803530289762199f92.zip | |
Checkboxradio: Initial commit of new widget
Diffstat (limited to 'demos/checkboxradio/product-selector.html')
| -rw-r--r-- | demos/checkboxradio/product-selector.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html new file mode 100644 index 000000000..f8da07118 --- /dev/null +++ b/demos/checkboxradio/product-selector.html @@ -0,0 +1,127 @@ +<!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"> + <script src="../../external/jquery/jquery.js"></script> + <script src="../../ui/core.js"></script> + <script src="../../ui/widget.js"></script> + <script src="../../ui/checkboxradio.js"></script> + <script src="../../ui/controlgroup.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $( "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> |