Skip to content

Commit 25d0c85

Browse files
arschmitzarschmitz
committed
Checkboxradio: Initial commit of new widget
1 parent 0203326 commit 25d0c85

29 files changed

Lines changed: 1741 additions & 3 deletions

‎demos/checkboxradio/default.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Checkboxradio - 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/checkboxradio.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
13+
$(function() {
14+
$( "input" ).checkboxradio({
15+
label: "foo"
16+
});
17+
});
18+
</script>
19+
</head>
20+
<body>
21+
<div class="widget">
22+
<h1>Checkbox and radio button widgets</h1>
23+
24+
<h2>Radio Group</h2>
25+
<fieldset>
26+
<legend>Select a Location: </legend>
27+
<label for="radio-1">New York</label>
28+
<input type="radio" name="radio-1" id="radio-1">
29+
<label for="radio-2">Paris</label>
30+
<input type="radio" name="radio-1" id="radio-2">
31+
<label for="radio-3">London</label>
32+
<input type="radio" name="radio-1" id="radio-3">
33+
</fieldset>
34+
35+
<h2>Checkbox</h2>
36+
<fieldset>
37+
<legend>Hotel Ratings: </legend>
38+
<label for="checkbox-1">2 Star</label>
39+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
40+
<label for="checkbox-2">3 Star</label>
41+
<input type="checkbox" name="checkbox-2" id="checkbox-2">
42+
<label for="checkbox-3">4 Star</label>
43+
<input type="checkbox" name="checkbox-3" id="checkbox-3">
44+
<label for="checkbox-4">5 Star</label>
45+
<input type="checkbox" name="checkbox-4" id="checkbox-4">
46+
</fieldset>
47+
48+
<h2>Checkbox nested in label</h2>
49+
<fieldset>
50+
<legend>Bed Type: </legend>
51+
<label for="checkbox-nested-1">2 Double
52+
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
53+
</label>
54+
<label for="checkbox-nested-2">2 Queen
55+
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
56+
</label>
57+
<label for="checkbox-nested-3">1 Queen
58+
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
59+
</label>
60+
<label for="checkbox-nested-4">1 King
61+
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
62+
</label>
63+
</fieldset>
64+
</div>
65+
66+
<div class="demo-description">
67+
<p>Examples of the markup that can be used with checkboxes and radio buttons.</p>
68+
</div>
69+
</body>
70+
</html>

‎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: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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="no-icons.html">No icons</a></li>
13+
<li><a href="radiogroup.html">Radiogroup</a></li>
14+
<li><a href="product-selector.html">Product Selector</a></li>
15+
</ul>
16+
17+
</body>
18+
</html>

‎demos/checkboxradio/no-icons.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Checkboxradio - No Icons</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+
<link rel="stylesheet" href="../demos.css">
12+
<script>
13+
$(function() {
14+
$( "input" ).checkboxradio({
15+
icon: false
16+
});
17+
});
18+
</script>
19+
</head>
20+
<body>
21+
<div class="widget">
22+
<h1>Checkbox and radio button widgets</h1>
23+
24+
<h2>Radio Group</h2>
25+
<fieldset>
26+
<legend>Select a Location: </legend>
27+
<label for="radio-1">New York</label>
28+
<input type="radio" name="radio-1" id="radio-1">
29+
<label for="radio-2">Paris</label>
30+
<input type="radio" name="radio-1" id="radio-2">
31+
<label for="radio-3">London</label>
32+
<input type="radio" name="radio-1" id="radio-3">
33+
</fieldset>
34+
35+
<h2>Checkbox</h2>
36+
<fieldset>
37+
<legend>Hotel Ratings: </legend>
38+
<label for="checkbox-1">2 Star</label>
39+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
40+
<label for="checkbox-2">3 Star</label>
41+
<input type="checkbox" name="checkbox-2" id="checkbox-2">
42+
<label for="checkbox-3">4 Star</label>
43+
<input type="checkbox" name="checkbox-3" id="checkbox-3">
44+
<label for="checkbox-4">5 Star</label>
45+
<input type="checkbox" name="checkbox-4" id="checkbox-4">
46+
</fieldset>
47+
48+
<h2>Checkbox nested in label</h2>
49+
<fieldset>
50+
<legend>Bed Type: </legend>
51+
<label for="checkbox-nested-1">2 Double
52+
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
53+
</label>
54+
<label for="checkbox-nested-2">2 Queen
55+
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
56+
</label>
57+
<label for="checkbox-nested-3">1 Queen
58+
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
59+
</label>
60+
<label for="checkbox-nested-4">1 King
61+
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
62+
</label>
63+
</fieldset>
64+
</div>
65+
66+
<div class="demo-description">
67+
<p>Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.</p>
68+
</div>
69+
</body>
70+
</html>

‎demos/checkboxradio/product-selector.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
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" ).trigger( "change" );
33+
$( ".shape-bar, .brand" ).controlgroup();
34+
$( ".toggles" ).controlgroup({
35+
direction: "vertical"
36+
});
37+
});
38+
</script>
39+
<style>
40+
.shape {
41+
margin-left: 4em;
42+
margin-top: 2.5em;
43+
height: 8em;
44+
width: 8em;
45+
box-shadow: 4px 4px 8px;
46+
color: #ccc;
47+
background-repeat: no-repeat;
48+
background-size: 90%;
49+
background-position: 50%;
50+
}
51+
.circle, .pill {
52+
border-radius: 8em;
53+
}
54+
.pill, .rectangle {
55+
width: 16em;
56+
}
57+
.square, .circle {
58+
margin-left: 9em;
59+
}
60+
.border {
61+
border: 2px solid #333333;
62+
}
63+
.toggles {
64+
width: 200px;
65+
}
66+
.toggle-wrap, .shape {
67+
display: inline-block;
68+
vertical-align: top;
69+
}
70+
.controls {
71+
background: #ccc;
72+
padding: 1em;
73+
display: inline-block;
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div class="controls">
79+
<div class="brand-wrap">
80+
<h3>1.) Select a brand</h3>
81+
<div class="brand">
82+
<label for="brand-jquery">jQuery</label>
83+
<input data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)" type="radio" name="brand" id="brand-jquery">
84+
<label for="brand-jquery-ui">jQuery UI</label>
85+
<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>
86+
<label for="brand-jquery-mobile">jQuery Mobile</label>
87+
<input data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)" type="radio" name="brand" id="brand-jquery-mobile">
88+
<label for="brand-sizzle">Sizzle</label>
89+
<input data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)" type="radio" name="brand" id="brand-sizzle">
90+
<label for="brand-qunit">QUnit</label>
91+
<input data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)" type="radio" name="brand" id="brand-qunit">
92+
</div>
93+
</div>
94+
<div class="shape-wrap">
95+
<h3>2.) Select a shape</h3>
96+
<div class="shape-bar">
97+
<label for="shape-circle">Circle</label>
98+
<input type="radio" name="shape" id="shape-circle" value="circle" checked>
99+
<label for="shape-square">Square</label>
100+
<input type="radio" name="shape" id="shape-square" value="square">
101+
<label for="shape-pill">Pill</label>
102+
<input type="radio" name="shape" id="shape-pill" value="pill">
103+
<label for="shape-rectangle">Rectangle</label>
104+
<input type="radio" name="shape" id="shape-rectangle" value="rectangle">
105+
</div>
106+
</div>
107+
<div class="toggle-wrap">
108+
<h3>3.) Customize</h3>
109+
<div class="toggles">
110+
<label for="color">Shadow</label>
111+
<input class="toggle brand-toggle" type="checkbox" name="color" id="color">
112+
<label for="border">Border</label>
113+
<input class="toggle" type="checkbox" name="border" id="border">
114+
<label for="background-color">Background</label>
115+
<input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
116+
<label for="background-image">Background Image</label>
117+
<input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked>
118+
</div>
119+
</div>
120+
<div class="shape circle background jquery-ui"></div>
121+
</div>
122+
123+
<div class="demo-description">
124+
<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>
125+
</div>
126+
</body>
127+
</html>

‎demos/checkboxradio/radiogroup.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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>Select a Location: </legend>
26+
<label for="radio-1">New York</label>
27+
<input type="radio" name="radio-1" id="radio-1">
28+
<label for="radio-2">Paris</label>
29+
<input type="radio" name="radio-1" id="radio-2">
30+
<label for="radio-3">London</label>
31+
<input type="radio" name="radio-1" id="radio-3">
32+
</fieldset>
33+
</div>
34+
35+
<div class="demo-description">
36+
<p>Example markup using the controlgroup widget to create a radio group.</p>
37+
</div>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)