corrade-http-templates – Blame information for rev 62
?pathlinks?
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> |