corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
Rev Author Line No. Line
62 office 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery UI Checkboxradio - Product Selector</title>
6 <link rel="stylesheet" href="../../themes/base/all.css">
7 <link rel="stylesheet" href="../demos.css">
8 <script src="../../external/requirejs/require.js"></script>
9 <script src="../bootstrap.js" data-modules="controlgroup">
10 function handleShape( e ) {
11 $( ".shape" )
12 .removeClass( "circle pill square rectangle" )
13 .addClass( $( e.target ).val() );
14 };
15 function handleToggle( e ) {
16 var target = $( e.target );
17  
18 if ( target.is( ".brand-toggle" ) ) {
19 var checked = target.is( ":checked" ),
20 value = $( "[name='brand']" )
21 .filter( ":checked" )
22 .attr( "data-" + target[ 0 ].id )
23 $( ".shape" ).css( target[ 0 ].id, checked ? value : "" );
24 } else {
25 $( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") );
26 }
27 }
28 function updateBrand() {
29 handleShape( { target: $( "[name='shape']:checked" ) } );
30 $( ".toggle:checked" ).each( function() {
31 handleToggle( { target: $( this ) } );
32 } );
33 }
34  
35 // Initalize widgets
36 $( "input" ).checkboxradio();
37 $( ".shape-bar, .brand" ).controlgroup();
38 $( ".toggles" ).controlgroup( {
39 direction: "vertical"
40 } );
41  
42 // Bind event handlers
43 $( "[name='shape']").on( "change", handleShape );
44 $( ".toggle" ).on( "change", handleToggle );
45 $( "[name='brand']").on( "change", updateBrand );
46  
47 // Set initial values
48 updateBrand();
49 </script>
50 <style>
51 .shape {
52 margin-left: 4em;
53 margin-top: 2.5em;
54 height: 8em;
55 width: 8em;
56 box-shadow: 4px 4px 8px;
57 color: #ccc;
58 background-repeat: no-repeat;
59 background-size: 90%;
60 background-position: 50%;
61 }
62 .circle, .pill {
63 border-radius: 8em;
64 }
65 .pill, .rectangle {
66 width: 16em;
67 }
68 .square, .circle {
69 margin-left: 9em;
70 }
71 .border {
72 border: 2px solid #333333;
73 }
74 .toggles {
75 width: 200px;
76 }
77 .toggle-wrap, .shape {
78 display: inline-block;
79 vertical-align: top;
80 }
81 .controls {
82 background: #ccc;
83 padding: 1em;
84 display: inline-block;
85 }
86 </style>
87 </head>
88 <body>
89 <div class="controls">
90 <div class="brand-wrap">
91 <h3>1.) Select a brand</h3>
92 <div class="brand">
93 <label for="brand-jquery">jQuery</label>
94 <input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)">
95 <label for="brand-jquery-ui">jQuery UI</label>
96 <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>
97 <label for="brand-jquery-mobile">jQuery Mobile</label>
98 <input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)">
99 <label for="brand-sizzle">Sizzle</label>
100 <input type="radio" name="brand" id="brand-sizzle" data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)">
101 <label for="brand-qunit">QUnit</label>
102 <input type="radio" name="brand" id="brand-qunit" data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)">
103 </div>
104 </div>
105 <div class="shape-wrap">
106 <h3>2.) Select a shape</h3>
107 <div class="shape-bar">
108 <label for="shape-circle">Circle</label>
109 <input type="radio" name="shape" id="shape-circle" value="circle" checked>
110 <label for="shape-square">Square</label>
111 <input type="radio" name="shape" id="shape-square" value="square">
112 <label for="shape-pill">Pill</label>
113 <input type="radio" name="shape" id="shape-pill" value="pill">
114 <label for="shape-rectangle">Rectangle</label>
115 <input type="radio" name="shape" id="shape-rectangle" value="rectangle">
116 </div>
117 </div>
118 <div class="toggle-wrap">
119 <h3>3.) Customize</h3>
120 <div class="toggles">
121 <label for="color">Shadow</label>
122 <input class="toggle brand-toggle" type="checkbox" name="color" id="color">
123 <label for="border">Border</label>
124 <input class="toggle" type="checkbox" name="border" id="border">
125 <label for="background-color">Background</label>
126 <input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
127 <label for="background-image">Background Image</label>
128 <input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked>
129 </div>
130 </div>
131 <div class="shape circle background jquery-ui"></div>
132 </div>
133  
134 <div class="demo-description">
135 <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>
136 </div>
137 </body>
138 </html>