Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 6e1194b

Browse files
jaspermdegrootjaspermdegroot
committed
Added checkbox and Radio buttons demo page
1 parent 827bec3 commit 6e1194b

File tree

2 files changed

+151
-2
lines changed

2 files changed

+151
-2
lines changed

‎docs/demos/checkboxradio/index.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Checkbox &amp; Radio buttons - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../_assets/js/jqm-demos.js"></script>
11+
<script src="../../../js/"></script>
12+
</head>
13+
<body>
14+
<div data-role="page">
15+
16+
<div data-role="header" data-theme="f">
17+
<h1>Checkbox &amp; Radio buttons</h1>
18+
<a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
19+
</div><!-- /header -->
20+
21+
<div data-role="content">
22+
23+
<div class="content-primary">
24+
25+
<form>
26+
27+
<h2>Radio button</h2>
28+
29+
<div data-demo-html="true">
30+
<fieldset data-role="controlgroup">
31+
<legend>Vertical:</legend>
32+
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked">
33+
<label for="radio-choice-v-2a">One</label>
34+
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="off">
35+
<label for="radio-choice-v-2b">Two</label>
36+
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="other">
37+
<label for="radio-choice-v-2c">Three</label>
38+
</fieldset>
39+
</div><!--/demo-html -->
40+
41+
<div data-demo-html="true">
42+
<fieldset data-role="controlgroup" data-iconpos="right" data-mini="true">
43+
<legend>Vertical, icon right, mini sized:</legend>
44+
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked">
45+
<label for="radio-choice-v-6a">One</label>
46+
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off">
47+
<label for="radio-choice-v-6b">Two</label>
48+
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other">
49+
<label for="radio-choice-v-6c">Three</label>
50+
</fieldset>
51+
</div><!--/demo-html -->
52+
53+
<div data-demo-html="true">
54+
<fieldset data-role="controlgroup" data-type="horizontal">
55+
<legend>Horizontal:</legend>
56+
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
57+
<label for="radio-choice-h-2a">One</label>
58+
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
59+
<label for="radio-choice-h-2b">Two</label>
60+
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
61+
<label for="radio-choice-h-2c">Three</label>
62+
</fieldset>
63+
</div><!--/demo-html -->
64+
65+
<div data-demo-html="true">
66+
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
67+
<legend>Horizontal, mini sized:</legend>
68+
<input type="radio" name="radio-choice-h-6" id="radio-choice-h-6a" value="on" checked="checked">
69+
<label for="radio-choice-h-6a">One</label>
70+
<input type="radio" name="radio-choice-h-6" id="radio-choice-h-6b" value="off">
71+
<label for="radio-choice-h-6b">Two</label>
72+
<input type="radio" name="radio-choice-h-6" id="radio-choice-h-6c" value="other">
73+
<label for="radio-choice-h-6c">Three</label>
74+
</fieldset>
75+
</div><!--/demo-html -->
76+
77+
<h2>Checkbox</h2>
78+
79+
<div data-demo-html="true">
80+
<label> <input type="checkbox" name="checkbox-0 "/>Single</label>
81+
82+
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
83+
<label for="checkbox-1">Single</label>
84+
</div><!--/demo-html -->
85+
86+
<div data-demo-html="true">
87+
<fieldset data-role="controlgroup">
88+
<legend>Vertical:</legend>
89+
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
90+
<label for="checkbox-v-2a">One</label>
91+
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
92+
<label for="checkbox-v-2b">Two</label>
93+
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
94+
<label for="checkbox-v-2c">Three</label>
95+
</fieldset>
96+
</div><!--/demo-html -->
97+
98+
<div data-demo-html="true">
99+
<fieldset data-role="controlgroup" data-iconpos="right" data-mini="true">
100+
<legend>Vertical, icon right, mini sized:</legend>
101+
<input type="checkbox" name="checkbox-v-6a" id="checkbox-v-6a">
102+
<label for="checkbox-v-6a">One</label>
103+
<input type="checkbox" name="checkbox-v-6b" id="checkbox-v-6b">
104+
<label for="checkbox-v-6b">Two</label>
105+
<input type="checkbox" name="checkbox-v-6c" id="checkbox-v-6c">
106+
<label for="checkbox-v-6c">Three</label>
107+
</fieldset>
108+
</div><!--/demo-html -->
109+
110+
<div data-demo-html="true">
111+
<fieldset data-role="controlgroup" data-type="horizontal">
112+
<legend>Horizontal:</legend>
113+
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
114+
<label for="checkbox-h-2a">One</label>
115+
<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
116+
<label for="checkbox-h-2b">Two</label>
117+
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
118+
<label for="checkbox-h-2c">Three</label>
119+
</fieldset>
120+
</div><!--/demo-html -->
121+
122+
<div data-demo-html="true">
123+
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
124+
<legend>Horizontal, mini sized:</legend>
125+
<input type="checkbox" name="checkbox-h-6a" id="checkbox-h-6a">
126+
<label for="checkbox-h-6a">One</label>
127+
<input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b">
128+
<label for="checkbox-h-6b">Two</label>
129+
<input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c">
130+
<label for="checkbox-h-6c">Three</label>
131+
</fieldset>
132+
</div><!--/demo-html -->
133+
134+
</form>
135+
136+
</div><!--/content-primary -->
137+
138+
</div><!-- /content -->
139+
140+
<div class="jqm-footer">
141+
<p class="jqm-version"></p>
142+
<p>&copy; 2012 jQuery Foundation and other contributors</p>
143+
</div><!-- /jqm-footer -->
144+
145+
</div><!-- /page -->
146+
</body>
147+
</html>

‎docs/demos/index.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,13 @@ <h2>Demos</h2>
3434
<li data-role="list-divider">Buttons</li>
3535
<li><a href="buttons/index.html" data-ajax="false">Buttons</a></li>
3636
<li><a href="buttons/buttons-grids.html" data-ajax="false">Buttons in grids</a></li>
37+
<li data-role="list-divider">Controlgroups</li>
38+
<li><a href="controlgroups/index.html" data-ajax="false">Controlgroups</a></li>
39+
<li data-role="list-divider">Checkbox &amp; Radio buttons</li>
40+
<li><a href="checkboxradio/index.html" data-ajax="false">Checkbox &amp; Radio buttons</a></li>
3741
<li data-role="list-divider">Selects</li>
3842
<li><a href="selects/index.html" data-ajax="false">Selects</a></li>
3943
<li><a href="selects/custom-multiple-selects.html" data-ajax="false">Custom multiple selects</a></li>
40-
<li data-role="list-divider">Controlgroups</li>
41-
<li><a href="controlgroups/index.html" data-ajax="false">Controlgroups</a></li>
4244
<li data-role="list-divider">Collapsibles</li>
4345
<li><a href="collapsibles/index.html" data-ajax="false">Collapsible</a></li>
4446
<li><a href="collapsibles/collapsible-set.html" data-ajax="false">Collapsible Set</a></li>

0 commit comments

Comments
 (0)