mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
106 lines
4.3 KiB
HTML
106 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Sliders</title>
|
|
<link rel="stylesheet" href="../../../themes/default/" />
|
|
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
|
|
<script src="../../../js/jquery.js"></script>
|
|
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
|
<script src="../../_assets/js/jqm-docs.js"></script>
|
|
<script src="../../../js/"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" class="type-interior">
|
|
|
|
<div data-role="header" data-theme="f">
|
|
<h1>Flip Toggle Switch</h1>
|
|
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<div class="content-primary">
|
|
|
|
<form action="#" method="get">
|
|
<h2>Flip toggle switch</h2>
|
|
|
|
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
|
<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
|
|
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
|
|
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
|
|
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
|
|
</ul>
|
|
|
|
<p>A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.</p>
|
|
|
|
<p>To create a flip toggle, start with a <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 accordingly. 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">
|
|
<label for="slider">Select slider:</label>
|
|
<select name="slider" id="slider" data-role="slider">
|
|
<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">
|
|
<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>Calling the switch plugin</h2>
|
|
|
|
<p>This plugin will auto initialize on any page that contains a <code>select</code> with the <code>data-role="slider"</code> attribute. However, if needed you can directly call the <code>slider</code> plugin on any selector, just like any jQuery plugin:</p>
|
|
<pre><code>
|
|
$('select').slider();
|
|
</code></pre>
|
|
|
|
</form>
|
|
</div><!--/content-primary -->
|
|
|
|
<div class="content-secondary">
|
|
|
|
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
|
|
|
|
<h3>More in this section</h3>
|
|
|
|
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
|
|
|
<li data-role="list-divider">Form elements</li>
|
|
<li><a href="../docs-forms.html">Form basics</a></li>
|
|
<li><a href="../forms-all.html">Form element gallery</a></li>
|
|
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
|
<li><a href="../search/">Search input</a></li>
|
|
<li><a href="../slider/">Slider</a></li>
|
|
<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
|
|
<li><a href="../radiobuttons/">Radio buttons</a></li>
|
|
<li><a href="../checkboxes/">Checkboxes</a></li>
|
|
<li><a href="../selects/">Select menus</a></li>
|
|
<li><a href="../forms-themes.html">Theming forms</a></li>
|
|
<li><a href="../forms-all-native.html">Native form elements</a></li>
|
|
<li><a href="../forms-sample.html">Submitting forms</a></li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
|
|
<div data-role="footer" class="footer-docs" data-theme="c">
|
|
<p>© 2011 The jQuery Project</p>
|
|
</div>
|
|
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html>
|
|
|