jquery-mobile/docs/forms/forms-switch.html at issue-1692 · pauln/jquery-mobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Docs - Flip switch</title>
	<link rel="stylesheet"  href="../../themes/default/" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../js/"></script>
	<script src="../docs/docs.js"></script>
</head>
<body>

<div data-role="page">

	<div data-role="header" data-theme="b">
		<h1>Flip switch</h1>
	</div><!-- /header -->

	<div data-role="content">

		<form action="#" method="get">

				<h2>Flip toggle switches</h2>
				<p>A binary "flip" switch is a common UI element on mobile devices that is used for any binary on/off or true/false type of data input. You can either drag the flip handle like a slider or tap on each half of the switch.</p>
				<p>To create a flip toggle,  To add a slider widget to your page, start with an <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>

<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
	&lt;label for=&quot;slider&quot;&gt;Select slider:&lt;/label&gt;
	&lt;select name=&quot;slider&quot; id=&quot;slider&quot; data-role=&quot;slider&quot;&gt;
		&lt;option value=&quot;off&quot;&gt;Off&lt;/option&gt;
		&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
	&lt;/select&gt;
&lt;/div&gt;
</code></pre>
		<p>The flip toggle switch is displayed like this:</p>
		<div data-role="fieldcontain">
			<label for="slider">Flip switch:</label>
			<select name="slider" id="slider" data-role="slider">
				<option value="off">Off</option>
				<option value="on">On</option>
			</select>
		</div>


<h2>Refreshing a flip switch</h2>

<p>If you manipulate a flip switch via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:</p>

<code><pre>
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
</pre></code>

	</form>

	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>