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

Commit d0e94b4

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: Separate demo page for new flipswitch widget.
1 parent 915edb5 commit d0e94b4

File tree

3 files changed

+198
-12
lines changed

3 files changed

+198
-12
lines changed

‎demos/nav-widgets.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616

1717
<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/fixed-toolbars/">Fixed toolbars</a></li>
1818

19-
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch toggle</a></li>
19+
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch, slider</a></li>
20+
21+
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/flipswitch/index.php" data-ajax="false">Flip switch <span class="ui-li-count">New</span></a></a></li>
2022

2123
<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer toolbar</a></li>
2224

‎demos/widgets/flipswitch/index.php‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
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>Flip Toggle Switch - 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+
<link rel="shortcut icon" href="../../favicon.ico">
10+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
11+
<script src="../../../js/jquery.js"></script>
12+
<script src="../../_assets/js/"></script>
13+
<script src="../../../js/"></script>
14+
</head>
15+
<body>
16+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
17+
18+
<div data-role="header" class="jqm-header">
19+
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
20+
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
21+
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
22+
<?php include( '../../search.php' ); ?>
23+
</div><!-- /header -->
24+
25+
<div data-role="content" class="jqm-content">
26+
27+
<h1>Flip switch <a href="http://api.jquerymobile.com/flipswitch/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
28+
29+
<p class="jqm-intro">Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
30+
</p>
31+
32+
<h2>Basic checkbox switch</h2>
33+
34+
<div data-demo-html="true">
35+
<form>
36+
<label for="flip-checkbox">Flip toggle switch checkbox:</label>
37+
<input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox"/>
38+
</form>
39+
</div><!-- /demo-html -->
40+
41+
<h2>Basic select switch</h2>
42+
43+
<div data-demo-html="true">
44+
<form>
45+
<label for="flip-select">Flip toggle switch select:</label>
46+
<select id="flip-select" name="flip-select" data-role="flipswitch">
47+
<option>On</option>
48+
<option>Off</option>
49+
</select>
50+
</form>
51+
</div><!-- /demo-html -->
52+
53+
<h2>Theme</h2>
54+
<div data-demo-html="true">
55+
<form>
56+
<label for="flip-2">Flip toggle switch:</label>
57+
<select name="flip-2" id="flip-2" data-role="flipswitch" data-theme="b">
58+
<option value="off">Off</option>
59+
<option value="on">On</option>
60+
</select>
61+
</form>
62+
</div><!-- /demo-html -->
63+
64+
<h2>Mini</h2>
65+
66+
<div data-demo-html="true">
67+
<form>
68+
<label for="flip-3">Flip toggle switch:</label>
69+
<select name="flip-3" id="flip-3" data-role="flipswitch" data-mini="true">
70+
<option value="off">Off</option>
71+
<option value="on">On</option>
72+
</select>
73+
</form>
74+
</div><!-- /demo-html -->
75+
76+
<h2>Disabled</h2>
77+
78+
<div data-demo-html="true">
79+
<form>
80+
<label for="flip-4">Flip toggle switch:</label>
81+
<select name="flip-4" id="flip-4" data-role="flipswitch" disabled="disabled">
82+
<option value="off">Off</option>
83+
<option value="on">On</option>
84+
</select>
85+
</form>
86+
</div><!-- /demo-html -->
87+
88+
<h2>Label hidden</h2>
89+
90+
<div data-demo-html="true">
91+
<form>
92+
<label for="flip-5" class="ui-hidden-accessible">Flip toggle switch:</label>
93+
<select name="flip-5" id="flip-5" data-role="flipswitch">
94+
<option value="off">Off</option>
95+
<option value="on">On</option>
96+
</select>
97+
</form>
98+
</div><!-- /demo-html -->
99+
100+
<h2>Fieldcontain</h2>
101+
102+
<div data-demo-html="true">
103+
<form>
104+
<div data-role="fieldcontain">
105+
<label for="flip-6">Flip toggle switch:</label>
106+
<select name="flip-6" id="flip-6" data-role="flipswitch">
107+
<option value="off">Off</option>
108+
<option value="on">On</option>
109+
</select>
110+
</div>
111+
</form>
112+
</div><!-- /demo-html -->
113+
114+
<h2>Fieldcontain, mini</h2>
115+
116+
<div data-demo-html="true">
117+
<form>
118+
<div data-role="fieldcontain">
119+
<label for="flip-7">Flip toggle switch:</label>
120+
<select name="flip-7" id="flip-7" data-role="flipswitch" data-mini="true">
121+
<option value="off">Off</option>
122+
<option value="on">On</option>
123+
</select>
124+
</div>
125+
</form>
126+
</div><!-- /demo-html -->
127+
128+
<h2>Fieldcontain, hidden label</h2>
129+
130+
<div data-demo-html="true">
131+
<div data-role="fieldcontain" class="ui-hide-label">
132+
<label for="flip-8">Flip toggle switch:</label>
133+
<select name="flip-8" id="flip-8" data-role="flipswitch">
134+
<option value="off">Off</option>
135+
<option value="on">On</option>
136+
</select>
137+
</div>
138+
</form>
139+
</div><!-- /demo-html -->
140+
141+
<h2>Fieldcontain, hidden label, mini</h2>
142+
143+
<div data-demo-html="true">
144+
<form>
145+
<div data-role="fieldcontain" class="ui-hide-label">
146+
<label for="flip-9">Flip toggle switch:</label>
147+
<select name="flip-9" id="flip-9" data-role="flipswitch" data-mini="true">
148+
<option value="off">Off</option>
149+
<option value="on">On</option>
150+
</select>
151+
</div>
152+
</form>
153+
</div><!-- /demo-html -->
154+
155+
<h2>Grid</h2>
156+
157+
<div data-demo-html="true">
158+
<form>
159+
<div class="ui-grid-a">
160+
<div class="ui-block-a">
161+
<label for="flip-10">Flip toggle switch:</label>
162+
<select name="flip-10" id="flip-10" data-role="flipswitch">
163+
<option value="off">Off</option>
164+
<option value="on">On</option>
165+
</select>
166+
</div><!-- /ui-block -->
167+
<div class="ui-block-b">
168+
<label for="flip-11">Flip toggle switch:</label>
169+
<select name="flip-11" id="flip-11" data-role="flipswitch" data-mini="true">
170+
<option value="off">Off</option>
171+
<option value="on">On</option>
172+
</select>
173+
</div><!-- /ui-block -->
174+
</div><!-- /ui-grid -->
175+
</form>
176+
</div><!-- /demo-html -->
177+
178+
</div><!-- /content -->
179+
180+
<div data-role="footer" class="jqm-footer">
181+
<p class="jqm-version"></p>
182+
<p>Copyright 2013 The jQuery Foundation</p>
183+
</div><!-- /footer -->
184+
185+
<?php include( '../../global-nav.php' ); ?>
186+
187+
</div><!-- /page -->
188+
</body>
189+
</html>

‎demos/widgets/sliders/switch.php‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,28 +38,23 @@
3838
<p class="jqm-intro">Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
3939
</p>
4040

41-
<h2>Basic checkbox switch</h2>
42-
<div data-demo-html="true">
43-
<form>
44-
<label for="flip-1">Flip toggle switch checkbox:</label>
45-
<input type="checkbox" data-role="flipswitch" name="flip-1" id="flip-1"/>
46-
</form>
47-
</div><!-- /demo-html -->
48-
<h2>Basic select switch</h2>
41+
<h2>Basic</h2>
4942
<div data-demo-html="true">
5043
<form>
51-
<label for="flip-select">Flip toggle switch select:</label>
52-
<select id="flip-select" name="flip-select" data-role="flipswitch">
44+
<label for="flip-1">Flip toggle switch:</label>
45+
<select id="flip-1" name="flip-1" data-role="slider">
5346
<option>On</option>
5447
<option>Off</option>
5548
</select>
5649
</form>
5750
</div><!-- /demo-html -->
51+
5852
<h2>Theme</h2>
53+
5954
<div data-demo-html="true">
6055
<form>
6156
<label for="flip-2">Flip toggle switch:</label>
62-
<select name="flip-2" id="flip-2" data-role="slider" data-track-theme="a" data-theme="a">
57+
<select name="flip-2" id="flip-2" data-role="slider" data-track-theme="b" data-theme="b">
6358
<option value="off">Off</option>
6459
<option value="on">On</option>
6560
</select>

0 commit comments

Comments
 (0)