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

api documentation changes for flip switch #2279

Closed
caseyjustus wants to merge 2 commits into from
Closed

api documentation changes for flip switch #2279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff02c58
adding flip toggle switch to api
caseyjustus Aug 1, 2011
4324a0d
Merge remote-tracking branch 'upstream/master'
caseyjustus Aug 1, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions docs/forms/switch/events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Flip Switch Events</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 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 Switch</h2>

<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="index.html" data-role="button" data-transition="fade">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" class="ui-btn-active">Events</a></li>
</ul>

<p>Since the native select field is changed by flip switch, you can watch for events on the native select field instead of needing to go through the slider plugin. Bind to the change event.</p>
<pre><code>
$( ".selector" ).bind( "change", function(event, ui) {
...
});
</code></pre>

<p>The Flip switch plugin has the following custom event:</p>

<dl>

<dt><code>create</code> triggered when a flip switch is created</dt>
<dd>
<p>This event is used to find out when a flip switch was created. It is not used to create a custom flip switch. The flip switch create event can be used like this: </p>

<pre><code>
$( ".selector" ).slider({
create: function(event, ui) { ... }
});
</code></pre>
</dd>


</dl>

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

<div class="content-secondary">

<div data-role="collapsible" data-collapsed="true" data-theme="b">

<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="../texts/index.html">Text inputs</a></li>
<li><a href="../forms-search.html">Search inputs</a></li>
<li><a href="../slider/index.html">Slider</a></li>
<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
<li><a href="../checkboxes/index.html">Checkboxes</a></li>
<li><a href="../selects/index.html">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>
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
</ul>
</div>
</div>

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

<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>

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

</body>
</html>

107 changes: 107 additions & 0 deletions docs/forms/switch/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!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="../../../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 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 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 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 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 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;Flip Switch:&lt;/label&gt;
&lt;select name=&quot;slider&quot; id=&quot;slider&quot; data-role=&quot;slider&quot;&gt;
&lt;option value=&quot;on&quot;&gt;On&lt;/option&gt;
&lt;option value=&quot;off&quot;&gt;Off&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-primary -->
<div class="content-secondary">

<div data-role="collapsible" data-collapsed="true" data-theme="b">

<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="../texts/index.html">Text inputs</a></li>
<li><a href="../forms-search.html">Search inputs</a></li>
<li><a href="../slider/index.html">Slider</a></li>
<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
<li><a href="../checkboxes/index.html">Checkboxes</a></li>
<li><a href="../selects/index.html">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>
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
</ul>
</div>
</div>

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

<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>

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

</body>
</html>

106 changes: 106 additions & 0 deletions docs/forms/switch/methods.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Flip Switch Methods</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">
<h2>Flip Switch</h2>
<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 Switch</h2>

<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="index.html" data-role="button" data-transition="fade">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" class="ui-btn-active">Methods</a></li>
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>

<p>The flip switch plugin has the following methods:</p>

<dl>
<dt><code>enable</code> enable a disabled flip switch</dt>
<dd>
<pre><code>
$('select').slider('enable');
</code></pre>
</dd>

<dt><code>disable</code> disable a flip switch.</dt>
<dd>
<pre><code>
$('select').slider('disable');
</code></pre>
</dd>

<dt><code>refresh</code> update the flip switch</dt>
<dd>
This is used to update the flip switch to reflect the native select element's value. Also, if you pass a true argument you can force the rebuild to happen.
<pre><code>
//refresh value
$('select').slider('refresh');

//refresh and force rebuild
$('select').slider('refresh', true);
</code></pre>
</dd>

</dl>

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

<div class="content-secondary">

<div data-role="collapsible" data-collapsed="true" data-theme="b">

<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="../texts/index.html">Text inputs</a></li>
<li><a href="../forms-search.html">Search inputs</a></li>
<li><a href="../slider/index.html">Slider</a></li>
<li data-theme="a"><a href="index.html">Flip toggle switch</a></li>
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
<li><a href="../checkboxes/index.html">Checkboxes</a></li>
<li><a href="../selects/index.html">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>
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
</ul>
</div>
</div>

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

<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>

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

</body>
</html>

Loading