jquery-mobile/docs/forms/forms-switch.html

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8" /> 
	<title>jQuery Mobile Docs - Forms</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/"></script>
	<script type="text/javascript" src="../docs/docs.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<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>


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

</body>
</html>
new forms docs 2010-10-14 21:41:38 +00:00			`<!DOCTYPE html>`
			`<html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<head>`
			`<meta charset="utf-8" />`
new forms docs 2010-10-14 21:41:38 +00:00			`<title>jQuery Mobile Docs - Forms</title>`
Sweep through all files to add a trailing slash to <link> tags that include thems/default. This should fix Opera Mobile Issue 763. 2011-01-06 00:19:24 +00:00			`<link rel="stylesheet" href="../../themes/default/" />`
Added link to demo css file to all docs pages 2010-11-11 19:15:42 +00:00			`<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>`
Removed jquery.js from js/index.php and updated all html doc/experiments/test files that incuded "js/" so that they also include jquery.js manually. This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile. 2011-01-20 19:26:12 +00:00			`<script type="text/javascript" src="../../js/jquery.js"></script>`
removed js/all redirect. updated files to use js/ 2010-11-09 22:57:26 +00:00			`<script type="text/javascript" src="../../js/"></script>`
new forms docs 2010-10-14 21:41:38 +00:00			`<script type="text/javascript" src="../docs/docs.js"></script>`
			`</head>`
			`<body>`

			`<div data-role="page">`

			`<div data-role="header">`
			`<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>`
			`<div data-role="fieldcontain">`
fixed docs for flip toggle switch widget 2010-11-17 10:33:07 +00:00			`<label for="slider">Select slider:</label>`
			`<select name="slider" id="slider" data-role="slider">`
new forms docs 2010-10-14 21:41:38 +00:00			`<option value="off">Off</option>`
			`<option value="on">On</option>`
			`</select>`
			`</div>`
			`</code></pre>`
			`<p>The flip toggle switch is displayed like this:</p>`
			`<div data-role="fieldcontain">`
fixed docs for flip toggle switch widget 2010-11-17 10:33:07 +00:00			`<label for="slider">Flip switch:</label>`
			`<select name="slider" id="slider" data-role="slider">`
new forms docs 2010-10-14 21:41:38 +00:00			`<option value="off">Off</option>`
			`<option value="on">On</option>`
			`</select>`
			`</div>`




			`</form>`

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

			`</body>`
fixed docs for flip toggle switch widget 2010-11-17 10:33:07 +00:00			`</html>`