Skip to content

Commit e70ff08

Browse files
arschmitzarschmitz
committed
Checkboxradio: simplify product selector demo
1 parent 587615f commit e70ff08

File tree

1 file changed

+27
-100
lines changed

1 file changed

+27
-100
lines changed

‎demos/checkboxradio/product-selector.html

Lines changed: 27 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,19 @@
1717
$( ".shape" ).removeClass( "circle pill square rectangle" )
1818
.addClass( $( this ).val() );
1919
});
20-
$( "[name='brand']").on( "change", function(){
21-
$( ".shape" ).removeClass( "jquery jquery-ui jquery-mobile sizzle qunit" )
22-
.addClass( $( this ).val() );
23-
});
2420
$( ".toggle" ).on( "change", function(){
25-
$( ".shape" ).toggleClass( $( this ).attr( "id" ), $( this ).is( ":checked" ) );
21+
if ( $( this ).is( ".brand-toggle" ) ) {
22+
var checked = $( this ).is( ":checked" ),
23+
value = $( "[name='brand']" ).filter( ":checked" ).attr( "data-" + this.id )
24+
$( ".shape" ).css( this.id, checked ? value : "" );
25+
} else {
26+
$( ".shape" ).toggleClass( this.id, $( this ).is( ":checked") );
27+
}
28+
});
29+
$( "[name='brand']").on( "change", function(){
30+
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
2631
});
32+
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
2733
$( ".shape-bar" ).controlgroup();
2834
$( ".toggles" ).controlgroup({
2935
direction: "vertical"
@@ -35,6 +41,11 @@
3541
margin: 1em;
3642
height: 15em;
3743
width: 15em;
44+
box-shadow: 4px 4px 8px;
45+
color: #ccc;
46+
background-repeat: no-repeat;
47+
background-size: 90%;
48+
background-position: 50%;
3849
}
3950
.circle, .pill {
4051
border-radius: 8em;
@@ -45,56 +56,6 @@
4556
.border {
4657
border: 2px solid #333333;
4758
}
48-
.shadow.jquery {
49-
box-shadow: 4px 4px 4px #7ACEF4;
50-
}
51-
.shadow.jquery-ui {
52-
box-shadow: 4px 4px 4px #FAA523;
53-
}
54-
.shadow.jquery-mobile {
55-
box-shadow: 4px 4px 4px #3EB249;
56-
}
57-
.shadow.sizzle {
58-
box-shadow: 4px 4px 4px #FAA523;
59-
}
60-
.shadow.qunit {
61-
box-shadow: 4px 4px 4px #9C3493;
62-
}
63-
.background.jquery {
64-
background-color: #0769AD;
65-
}
66-
.background.jquery-ui {
67-
background-color: #B24926;
68-
}
69-
.background.jquery-mobile {
70-
background-color: #108040;
71-
}
72-
.background.sizzle {
73-
background-color: #9A1B1E;
74-
}
75-
.background.qunit {
76-
background-color: #390F39;
77-
}
78-
.background-image.jquery {
79-
background-image: url(http://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png);
80-
}
81-
.background-image.jquery-ui {
82-
background-image: url(http://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png);
83-
}
84-
.background-image.jquery-mobile {
85-
background-image: url(http://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery-mobile.png);
86-
}
87-
.background-image.sizzle {
88-
background-image: url(http://jquery.com/jquery-wp-content/themes/jquery/images/logo-sizzle.png);
89-
}
90-
.background-image.qunit {
91-
background-image: url(http://jquery.com/jquery-wp-content/themes/jquery/images/logo-qunit.png);
92-
}
93-
.background-image {
94-
background-repeat: no-repeat;
95-
background-size: 90%;
96-
background-position: 50%;
97-
}
9859
.toggles {
9960
width: 200px;
10061
}
@@ -110,37 +71,6 @@
11071
padding: 1em;
11172
display: inline-block;
11273
}
113-
.spin {
114-
-webkit-animation-name: spin;
115-
-webkit-animation-duration: 4000ms;
116-
-webkit-animation-iteration-count: infinite;
117-
-webkit-animation-timing-function: linear;
118-
-moz-animation-name: spin;
119-
-moz-animation-duration: 4000ms;
120-
-moz-animation-iteration-count: infinite;
121-
-moz-animation-timing-function: linear;
122-
-ms-animation-name: spin;
123-
-ms-animation-duration: 4000ms;
124-
-ms-animation-iteration-count: infinite;
125-
-ms-animation-timing-function: linear;
126-
127-
animation-name: spin;
128-
animation-duration: 4000ms;
129-
animation-iteration-count: infinite;
130-
animation-timing-function: linear;
131-
}
132-
@-moz-keyframes spin {
133-
from { -moz-transform: rotateY(0deg); }
134-
to { -moz-transform: rotateY(360deg); }
135-
}
136-
@-webkit-keyframes spin {
137-
from { -webkit-transform: rotateY(0deg); }
138-
to { -webkit-transform: rotateY(360deg); }
139-
}
140-
@keyframes spin {
141-
from {transform:rotateY(0deg);}
142-
to {transform:rotateY(360deg);}
143-
}
14474
</style>
14575
</head>
14676
<body>
@@ -149,15 +79,15 @@
14979
<h2>1.) Select a brand</h2>
15080
<div class="brand">
15181
<label for="brand-jquery">jQuery</label>
152-
<input type="radio" name="brand" id="brand-jquery" value="jquery">
82+
<input data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)" type="radio" name="brand" id="brand-jquery">
15383
<label for="brand-jquery-ui">jQuery UI</label>
154-
<input type="radio" name="brand" id="brand-jquery-ui" value="jquery-ui" checked>
84+
<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>
15585
<label for="brand-jquery-mobile">jQuery Mobile</label>
156-
<input type="radio" name="brand" id="brand-jquery-mobile" value="jquery-mobile">
86+
<input data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)" type="radio" name="brand" id="brand-jquery-mobile">
15787
<label for="brand-sizzle">Sizzle</label>
158-
<input type="radio" name="brand" id="brand-sizzle" value="sizzle">
88+
<input data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)" type="radio" name="brand" id="brand-sizzle">
15989
<label for="brand-qunit">QUnit</label>
160-
<input type="radio" name="brand" id="brand-qunit" value="qunit">
90+
<input data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)" type="radio" name="brand" id="brand-qunit">
16191
</div>
16292
</div>
16393
<div class="shape-wrap">
@@ -167,7 +97,7 @@ <h2>2.) Select a shape</h2>
16797
<input type="radio" name="shape" id="shape-circle" value="circle" checked>
16898
<label for="shape-square">Square</label>
16999
<input type="radio" name="shape" id="shape-square" value="square">
170-
<label for="shape-pill">pill</label>
100+
<label for="shape-pill">Pill</label>
171101
<input type="radio" name="shape" id="shape-pill" value="pill">
172102
<label for="shape-rectangle">Rectangle</label>
173103
<input type="radio" name="shape" id="shape-rectangle" value="rectangle">
@@ -176,22 +106,19 @@ <h2>2.) Select a shape</h2>
176106
<div class="toggle-wrap">
177107
<h2>3.) customize</h2>
178108
<div class="toggles">
179-
<label for="shadow">Shadow</label>
180-
<input class="toggle" type="checkbox" name="shadow" id="shadow">
109+
<label for="color">Shadow</label>
110+
<input class="toggle brand-toggle" type="checkbox" name="color" id="color">
181111
<label for="border">Border</label>
182112
<input class="toggle" type="checkbox" name="border" id="border">
183-
<label for="background">Background</label>
184-
<input class="toggle" type="checkbox" name="background" id="background" checked>
113+
<label for="background-color">Background</label>
114+
<input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
185115
<label for="background-image">Background Image</label>
186-
<input class="toggle" type="checkbox" name="background-image" id="background-image">
187-
<label for="spin">Animate</label>
188-
<input class="toggle" type="checkbox" name="animate" id="spin">
116+
<input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked>
189117
</div>
190118
</div>
191119
<div class="shape circle background jquery-ui"></div>
192120
</div>
193121

194-
195122
<div class="demo-description">
196123
<p>Examples of the markup that can be used with checkboxs and radio buttons.</p>
197124
</div>

0 commit comments

Comments
 (0)