Skip to content

Commit 7e49bba

Browse files
arschmitzarschmitz
committed
Checkboxradio: Added new product selector demo
1 parent 8c4f23f commit 7e49bba

File tree

19 files changed

+660
-61
lines changed

19 files changed

+660
-61
lines changed

‎demos/checkboxradio/default.html

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Button - Default functionality</title>
5+
<title>jQuery UI Checkboxradio - Default functionality</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../ui/core.js"></script>
@@ -19,21 +19,28 @@
1919
<div class="widget">
2020
<h1>Checkbox and radio button widgets</h1>
2121
<h2>Checkbox</h2>
22-
23-
<label for="checkbox-1">Checkbox</label>
24-
<input type="checkbox" name="checkbox-1" id="checkbox-1">
25-
<label>Checkbox nested in label
26-
<input type="checkbox" name="checkbox-2" id="checkbox-2">
27-
</label>
22+
<fieldset>
23+
<legend>Filter by rating</legend>
24+
<label for="rating-1">2 Star</label>
25+
<input type="checkbox" name="rating" id="rating-1" value="1">
26+
<label for="rating-2">3 Star</label>
27+
<input type="checkbox" name="rating" id="rating-2" value="2">
28+
<label for="rating-3">4 Star</label>
29+
<input type="checkbox" name="rating" id="rating-3" value="3">
30+
<label for="rating-4">5 Star</label>
31+
<input type="checkbox" name="rating" id="rating-4" value="4">
32+
</fieldset>
2833
<h2>Radio Group</h2>
29-
30-
<label for="radio-1">One</label>
31-
<input type="radio" name="radio-1" id="radio-1">
32-
<label>Two
33-
<input type="radio" name="radio-1" id="radio-2">
34-
</label>
35-
<input type="radio" name="radio-1" id="radio-3">
36-
<label for="radio-3">Three</label>
34+
<fieldset>
35+
<legend>Filter by location: </legend>
36+
<label for="location-new-york">New York</label>
37+
<input type="radio" name="location" id="location-new-york">
38+
<label>Paris
39+
<input type="radio" name="location" id="location-paris">
40+
</label>
41+
<input type="radio" name="location" id="location-london">
42+
<label for="location-london">London</label>
43+
</fieldset>
3744
</div>
3845

3946
<div class="demo-description">

‎demos/checkboxradio/icons.html

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Button - Icon functionality</title>
5+
<title>jQuery UI Checkboxradio - Icon functionality</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../ui/core.js"></script>
@@ -22,20 +22,28 @@
2222
<h1>Checkbox and radio button widgets</h1>
2323
<h2>Checkbox</h2>
2424

25-
<label for="checkbox-1">Checkbox</label>
26-
<input type="checkbox" name="checkbox-1" id="checkbox-1">
27-
<label>Checkbox nested in label
25+
<fieldset>
26+
<legend>Rating</legend>
27+
<label for="checkbox-1">2 Star</label>
28+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
29+
<label for="checkbox-2">3 Star</label>
2830
<input type="checkbox" name="checkbox-2" id="checkbox-2">
29-
</label>
31+
<label for="checkbox-3">4 Star</label>
32+
<input type="checkbox" name="checkbox-3" id="checkbox-3">
33+
<label for="checkbox-4">5 Star</label>
34+
<input type="checkbox" name="checkbox-4" id="checkbox-4">
35+
</fieldset>
3036
<h2>Radio Group</h2>
31-
32-
<label for="radio-1">One</label>
33-
<input type="radio" name="radio-1" id="radio-1">
34-
<label>Two
35-
<input type="radio" name="radio-1" id="radio-2">
36-
</label>
37-
<input type="radio" name="radio-1" id="radio-3">
38-
<label for="radio-3">Three</label>
37+
<fieldset>
38+
<legend>Location: </legend>
39+
<label for="radio-1">New York</label>
40+
<input type="radio" name="radio-1" id="radio-1">
41+
<label>Paris
42+
<input type="radio" name="radio-1" id="radio-2">
43+
</label>
44+
<input type="radio" name="radio-1" id="radio-3">
45+
<label for="radio-3">London</label>
46+
</fieldset>
3947
</div>
4048

4149
<div class="demo-description">

‎demos/checkboxradio/images/jquery-mobile.png

6.15 KB
Loading

‎demos/checkboxradio/images/jquery-ui.png

6.88 KB
Loading

‎demos/checkboxradio/images/jquery.png

7.04 KB
Loading

‎demos/checkboxradio/images/qunit.png

6.58 KB
Loading

‎demos/checkboxradio/images/sizzle.png

8.67 KB
Loading

‎demos/checkboxradio/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<ul>
1111
<li><a href="default.html">Default functionality</a></li>
1212
<li><a href="icons.html">Icons</a></li>
13+
<li><a href="radiogroup.html">Radiogroup</a></li>
14+
<li><a href="product-selector.html">Product Selector</a></li>
1315
</ul>
1416

1517
</body>

‎demos/checkboxradio/product-selector.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../ui/core.js"></script>
9+
<script src="../../ui/widget.js"></script>
10+
<script src="../../ui/checkboxradio.js"></script>
11+
<script src="../../ui/controlgroup.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<script>
14+
$(function() {
15+
$( "input" ).checkboxradio();
16+
$( "[name='shape']").on( "change", function(){
17+
$( ".shape" ).removeClass( "circle pill square rectangle" )
18+
.addClass( $( this ).val() );
19+
});
20+
$( ".toggle" ).on( "change", function(){
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" );
31+
});
32+
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
33+
$( ".shape-bar" ).controlgroup();
34+
$( ".toggles" ).controlgroup({
35+
direction: "vertical"
36+
});
37+
});
38+
</script>
39+
<style>
40+
.shape {
41+
margin: 1em;
42+
height: 15em;
43+
width: 15em;
44+
box-shadow: 4px 4px 8px;
45+
color: #ccc;
46+
background-repeat: no-repeat;
47+
background-size: 90%;
48+
background-position: 50%;
49+
}
50+
.circle, .pill {
51+
border-radius: 8em;
52+
}
53+
.pill, .rectangle {
54+
width: 30em;
55+
}
56+
.border {
57+
border: 2px solid #333333;
58+
}
59+
.toggles {
60+
width: 200px;
61+
}
62+
.toggle-wrap, .shape {
63+
display: inline-block;
64+
vertical-align: top;
65+
}
66+
.shape-wrap {
67+
margin-bottom: 2em;
68+
}
69+
.controls {
70+
background: #ccc;
71+
padding: 1em;
72+
display: inline-block;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<div class="controls">
78+
<div class="brand-wrap">
79+
<h2>1.) Select a brand</h2>
80+
<div class="brand">
81+
<label for="brand-jquery">jQuery</label>
82+
<input data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)" type="radio" name="brand" id="brand-jquery">
83+
<label for="brand-jquery-ui">jQuery UI</label>
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>
85+
<label for="brand-jquery-mobile">jQuery Mobile</label>
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">
87+
<label for="brand-sizzle">Sizzle</label>
88+
<input data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)" type="radio" name="brand" id="brand-sizzle">
89+
<label for="brand-qunit">QUnit</label>
90+
<input data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)" type="radio" name="brand" id="brand-qunit">
91+
</div>
92+
</div>
93+
<div class="shape-wrap">
94+
<h2>2.) Select a shape</h2>
95+
<div class="shape-bar">
96+
<label for="shape-circle">Circle</label>
97+
<input type="radio" name="shape" id="shape-circle" value="circle" checked>
98+
<label for="shape-square">Square</label>
99+
<input type="radio" name="shape" id="shape-square" value="square">
100+
<label for="shape-pill">Pill</label>
101+
<input type="radio" name="shape" id="shape-pill" value="pill">
102+
<label for="shape-rectangle">Rectangle</label>
103+
<input type="radio" name="shape" id="shape-rectangle" value="rectangle">
104+
</div>
105+
</div>
106+
<div class="toggle-wrap">
107+
<h2>3.) customize</h2>
108+
<div class="toggles">
109+
<label for="color">Shadow</label>
110+
<input class="toggle brand-toggle" type="checkbox" name="color" id="color">
111+
<label for="border">Border</label>
112+
<input class="toggle" type="checkbox" name="border" id="border">
113+
<label for="background-color">Background</label>
114+
<input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
115+
<label for="background-image">Background Image</label>
116+
<input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked>
117+
</div>
118+
</div>
119+
<div class="shape circle background jquery-ui"></div>
120+
</div>
121+
122+
<div class="demo-description">
123+
<p>Examples of the markup that can be used with checkboxs and radio buttons.</p>
124+
</div>
125+
</body>
126+
</html>

‎demos/checkboxradio/radiogroup.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Checkboxradio - Radio Group</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../ui/core.js"></script>
9+
<script src="../../ui/widget.js"></script>
10+
<script src="../../ui/checkboxradio.js"></script>
11+
<script src="../../ui/controlgroup.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<script>
14+
$(function() {
15+
$( "input" ).checkboxradio();
16+
$( "fieldset" ).controlgroup();
17+
});
18+
</script>
19+
</head>
20+
<body>
21+
<div class="widget">
22+
23+
<h2>Radio Group</h2>
24+
<fieldset >
25+
<legend>Location: </legend>
26+
<label for="radio-1">New York</label>
27+
<input type="radio" name="radio-1" id="radio-1">
28+
<label>Paris
29+
<input type="radio" name="radio-1" id="radio-2">
30+
</label>
31+
<input type="radio" name="radio-1" id="radio-3">
32+
<label for="radio-3">London</label>
33+
</fieldset>
34+
</div>
35+
36+
<div class="demo-description">
37+
<p>Example markup using a controlgroup to create a radio group</p>
38+
</div>
39+
</body>
40+
</html>

‎demos/controlgroup/default.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Controlgroup - Default Functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../ui/core.js"></script>
9+
<script src="../../ui/widget.js"></script>
10+
<script src="../../ui/button.js"></script>
11+
<script src="../../ui/checkboxradio.js"></script>
12+
<script src="../../ui/menu.js"></script>
13+
<script src="../../ui/position.js"></script>
14+
<script src="../../ui/selectmenu.js"></script>
15+
<script src="../../ui/controlgroup.js"></script>
16+
<link rel="stylesheet" href="../demos.css">
17+
<script>
18+
$(function() {
19+
$( ".controlgroup" ).eq( 0 ).controlgroup()
20+
.end().eq( 1 ).controlgroup({
21+
"direction": "vertical"
22+
});
23+
});
24+
</script>
25+
<style>
26+
.ui-controlgroup-vertical {
27+
width: 300px;
28+
}
29+
.ui-controlgroup-vertical select {
30+
width: 100%;
31+
}
32+
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
33+
text-align: center;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div class="demo-description">
39+
<p>A Controlgroup featuring various form controls</p>
40+
</div>
41+
<div class="widget">
42+
<h1>Controlgroup</h1>
43+
<fieldset>
44+
<legend>Rental Car</legend>
45+
<div class="controlgroup">
46+
<select>
47+
<option>Compact car</option>
48+
<option>Midsize car</option>
49+
<option>Full size car</option>
50+
<option>SUV</option>
51+
<option>Luxury</option>
52+
<option>Truck</option>
53+
<option>Van</option>
54+
</select>
55+
<label for="transmission-standard">Standard</label>
56+
<input type="radio" name="transmission" id="transmission-standard">
57+
<label for="transmission-automatic">Automatic</label>
58+
<input type="radio" name="transmission" id="transmission-automatic">
59+
<label for="insurance">Insurance</label>
60+
<input type="checkbox" name="insurance" id="insurance">
61+
<button>Book Now!</button>
62+
</div>
63+
</fieldset>
64+
<br/>
65+
<fieldset>
66+
<legend>Rental Car</legend>
67+
<div class="controlgroup-horizontal">
68+
<select>
69+
<option>Compact car</option>
70+
<option>Midsize car</option>
71+
<option>Full size car</option>
72+
<option>SUV</option>
73+
<option>Luxury</option>
74+
<option>Truck</option>
75+
<option>Van</option>
76+
</select>
77+
<label for="transmission-standard-v">Standard</label>
78+
<input type="radio" name="transmission-v" id="transmission-standard-v">
79+
<label for="transmission-automatic-v">Automatic</label>
80+
<input type="radio" name="transmission-v" id="transmission-automatic-v">
81+
<label for="insurance-v">Insurance</label>
82+
<input type="checkbox" name="insurance" id="insurance-v">
83+
<button>Book Now!</button>
84+
</div>
85+
</fieldset>
86+
>>>>>>> 423b976... Checkboxradio: Fixed demos and tests
87+
</div>
88+
89+
</body>
90+
</html>

‎demos/controlgroup/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery UI Checkboxradio Demos</title>
7+
</head>
8+
<body>
9+
10+
<ul>
11+
<li><a href="default.html">Default functionality</a></li>
12+
<li><a href="splitbutton.html">Split Button</a></li>
13+
<li><a href="toolbar.html">Toolbar</a></li>
14+
</ul>
15+
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)