Skip to content

Commit 308cafc

Browse files
arschmitzarschmitz
committed
Checkboxradio: updating demos improved labels more realistic
1 parent c502a2d commit 308cafc

File tree

10 files changed

+190
-120
lines changed

10 files changed

+190
-120
lines changed

‎demos/checkboxradio/default.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 - 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>
@@ -20,20 +20,28 @@
2020
<h1>Checkbox and radio button widgets</h1>
2121
<h2>Checkbox</h2>
2222

23-
<label for="checkbox-1">Checkbox</label>
24-
<input type="checkbox" name="checkbox-1" id="checkbox-1">
25-
<label>Checkbox nested in label
23+
<fieldset>
24+
<legend>Rating</legend>
25+
<label for="checkbox-1">2 Star</label>
26+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
27+
<label for="checkbox-2">3 Star</label>
2628
<input type="checkbox" name="checkbox-2" id="checkbox-2">
27-
</label>
29+
<label for="checkbox-3">4 Star</label>
30+
<input type="checkbox" name="checkbox-3" id="checkbox-3">
31+
<label for="checkbox-4">5 Star</label>
32+
<input type="checkbox" name="checkbox-4" id="checkbox-4">
33+
</fieldset>
2834
<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>
35+
<fieldset>
36+
<legend>Location: </legend>
37+
<label for="radio-1">New York</label>
38+
<input type="radio" name="radio-1" id="radio-1">
39+
<label>Paris
40+
<input type="radio" name="radio-1" id="radio-2">
41+
</label>
42+
<input type="radio" name="radio-1" id="radio-3">
43+
<label for="radio-3">London</label>
44+
</fieldset>
3745
</div>
3846

3947
<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/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
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>
1314
<li><a href="product-selector.html">Product Selector</a></li>
1415
</ul>
1516

‎demos/checkboxradio/product-selector.html

Lines changed: 1 addition & 1 deletion
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 - Product Selector</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>

‎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: 50 additions & 91 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 Controlgroup - Default Funstionality</title>
5+
<title>jQuery UI Controlgroup - 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>
@@ -16,6 +16,7 @@
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19+
$( "#insurance, #insurance-v" ).checkboxradio({ icon: true });
1920
$( ".controlgroup" ).eq( 0 ).controlgroup()
2021
.end().eq( 1 ).controlgroup({
2122
"direction": "vertical"
@@ -29,103 +30,61 @@
2930
.ui-controlgroup-vertical select {
3031
width: 100%;
3132
}
33+
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
34+
text-align: center;
35+
}
3236
</style>
3337
</head>
3438
<body>
3539
<div class="demo-description">
36-
<p>Some buttons with various combinations of text and icons.</p>
40+
<p>A Controlgroup featuring various form controls</p>
3741
</div>
3842
<div class="widget">
39-
<h1>Widget</h1>
40-
<div class="controlgroup">
41-
<button style="display:none">Button with icon only</button>
42-
<select>
43-
<option>Fast</option>
44-
<option>Medium</option>
45-
<option>Slow</option>
46-
</select>
47-
<label for="checkbox">Checkbox</label>
48-
<input type="checkbox" value="checkbox" id="checkbox" />
49-
<select>
50-
<option>Fast</option>
51-
<option>Medium</option>
52-
<option>Slow</option>
53-
</select>
54-
<button>Button with icon on the bottom</button>
55-
<select>
56-
<option>Fast</option>
57-
<option>Medium</option>
58-
<option>Slow</option>
59-
</select>
60-
</div>
61-
<br/>
62-
<div class="controlgroup">
63-
<button style="display:none">Button with icon only</button>
64-
<select>
65-
<option>Fast</option>
66-
<option>Medium</option>
67-
<option>Slow</option>
68-
</select>
69-
<label for="checkbox2">Checkbox</label>
70-
<input type="checkbox" value="checkbox2" id="checkbox2" />
71-
<select>
72-
<option>Fast</option>
73-
<option>Medium</option>
74-
<option>Slow</option>
75-
</select>
76-
<button>Button with icon on the bottom</button>
77-
<select>
78-
<option>Fast</option>
79-
<option>Medium</option>
80-
<option>Slow</option>
81-
</select>
82-
</div>
83-
</div>
84-
<div class="css">
85-
<h1>CSS</h1>
86-
<div class="ui-controlgroup">
87-
<button class="ui-button ui-widget ui-corner-left ui-button-icon-only" title="Button with icon only">
88-
<span class="ui-icon ui-icon-gear"></span>
89-
Button with icon only
90-
</button>
91-
<button class="ui-button ui-widget ui-icon-beginning">
92-
<span class="ui-icon ui-icon-triangle-1-w"></span>
93-
Button with icon on the left
94-
</button>
95-
<button class="ui-button ui-widget ui-icon-end">
96-
<span class="ui-icon ui-icon-triangle-1-e"></span>
97-
Button with icon on the right
98-
</button>
99-
<button class="ui-button ui-widget">
100-
Button with icon on bottom
101-
</button>
102-
<button class="ui-button ui-widget ui-corner-right">
103-
Button with icon on top
104-
</button>
105-
</div>
43+
<h1>Controlgroup</h1>
44+
<fieldset>
45+
<legend>Rental Car</legend>
46+
<div class="controlgroup">
47+
<select>
48+
<option>Compact car</option>
49+
<option>Midsize car</option>
50+
<option>Full size car</option>
51+
<option>SUV</option>
52+
<option>Luxury</option>
53+
<option>Truck</option>
54+
<option>Van</option>
55+
</select>
56+
<label for="transmission-standard">Standard</label>
57+
<input type="radio" name="transmission" id="transmission-standard">
58+
<label for="transmission-automatic">Automatic</label>
59+
<input type="radio" name="transmission" id="transmission-automatic">
60+
<label for="insurance">Insurance</label>
61+
<input type="checkbox" name="insurance" id="insurance">
62+
<button>Book Now!</button>
63+
</div>
64+
</fieldset>
10665
<br/>
107-
<div class="ui-controlgroup ui-controlgroup-vertical">
108-
<button class="ui-button ui-widget ui-corner-top ui-button-icon-only" title="Button with icon only">
109-
<span class="ui-icon ui-icon-gear"></span>
110-
Button with icon only
111-
</button>
112-
<button class="ui-button ui-widget ui-icon-beginning">
113-
<span class="ui-icon ui-icon-triangle-1-w"></span>
114-
Button with icon on the left
115-
</button>
116-
<button class="ui-button ui-widget ui-icon-end">
117-
<span class="ui-icon ui-icon-triangle-1-e"></span>
118-
Button with icon on the right
119-
</button>
120-
<button class="ui-button ui-widget ui-icon-bottom">
121-
<span class="ui-icon ui-icon-triangle-1-s"></span>
122-
Button with icon on bottom
123-
</button>
124-
<button class="ui-button ui-widget ui-corner-bottom ui-icon-top">
125-
<span class="ui-icon ui-icon-triangle-1-n"></span>
126-
Button with icon on top
127-
</button>
128-
</div>
66+
<fieldset>
67+
<legend>Rental Car</legend>
68+
<div class="controlgroup">
69+
<select>
70+
<option>Compact car</option>
71+
<option>Midsize car</option>
72+
<option>Full size car</option>
73+
<option>SUV</option>
74+
<option>Luxury</option>
75+
<option>Truck</option>
76+
<option>Van</option>
77+
</select>
78+
<label for="transmission-standard-v">Standard</label>
79+
<input type="radio" name="transmission-v" id="transmission-standard-v">
80+
<label for="transmission-automatic-v">Automatic</label>
81+
<input type="radio" name="transmission-v" id="transmission-automatic-v">
82+
<label for="insurance-v">Insurance</label>
83+
<input type="checkbox" name="insurance" id="insurance-v">
84+
<button>Book Now!</button>
85+
</div>
86+
</fieldset>
12987
</div>
88+
13089
</body>
13190
</html>

‎demos/controlgroup/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<ul>
1111
<li><a href="default.html">Default functionality</a></li>
12+
<li><a href="splitbutton.html">Split Button</a></li>
1213
<li><a href="toolbar.html">Toolbar</a></li>
1314
</ul>
1415

‎demos/controlgroup/splitbutton.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Controlgroup - Split Button</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+
$( "select" ).selectmenu({
20+
classes: {
21+
"ui-selectmenu-button": "ui-button-icon-only"
22+
}
23+
}).selectmenu( "widget" ).removeClass( "ui-icon-end" );
24+
$( ".controlgroup" ).controlgroup();
25+
$( "button" ).click(function() {
26+
alert( "Running the last action" );
27+
});
28+
});
29+
</script>
30+
<style>
31+
select {
32+
width: 2em;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div class="demo-description">
38+
<p>A Controlgroup creating a split button</p>
39+
</div>
40+
<div class="widget">
41+
<h1>Split button</h1>
42+
<div class="controlgroup">
43+
<button>Run last option</button>
44+
<select>
45+
<option>Open...</option>
46+
<option>Save</option>
47+
<option>Delete</option>
48+
</select>
49+
</div>
50+
</div>
51+
52+
</body>
53+
</html>

‎demos/controlgroup/toolbar.html

Lines changed: 1 addition & 1 deletion
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 Controlgroup - Default Funstionality</title>
5+
<title>jQuery UI Controlgroup - Toolbar</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>

0 commit comments

Comments
 (0)