From ff02c5849775c83ac9e1854d7df4dd915dfa46f3 Mon Sep 17 00:00:00 2001 From: Casey Justus Date: Mon, 1 Aug 2011 03:41:07 -0400 Subject: [PATCH] adding flip toggle switch to api --- docs/forms/switch/events.html | 100 ++++++++++++++++++++++++++++++ docs/forms/switch/index.html | 107 +++++++++++++++++++++++++++++++++ docs/forms/switch/methods.html | 106 ++++++++++++++++++++++++++++++++ docs/forms/switch/options.html | 99 ++++++++++++++++++++++++++++++ 4 files changed, 412 insertions(+) create mode 100644 docs/forms/switch/events.html create mode 100644 docs/forms/switch/index.html create mode 100644 docs/forms/switch/methods.html create mode 100644 docs/forms/switch/options.html diff --git a/docs/forms/switch/events.html b/docs/forms/switch/events.html new file mode 100644 index 00000000000..cbc65e5661b --- /dev/null +++ b/docs/forms/switch/events.html @@ -0,0 +1,100 @@ + + + + + + jQuery Mobile Docs - Flip Switch Events + + + + + + + + + +
+ +
+

Flip Switch

+ Home +
+ +
+
+ +
+ +

Flip Switch

+ + + +

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.

+ 
 
+$( ".selector" ).bind( "change", function(event, ui) {
+  ...
+});
+
+ +

The Flip switch plugin has the following custom event:

+ +
+ +
create triggered when a flip switch is created
+
+

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:

+ + 

+$( ".selector" ).slider({
+   create: function(event, ui) { ... }
+});		
+
+
+ + +
+ +
+
+ +
+ +
+ +

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

+
+ +
+ + + + diff --git a/docs/forms/switch/index.html b/docs/forms/switch/index.html new file mode 100644 index 00000000000..8674bae1a42 --- /dev/null +++ b/docs/forms/switch/index.html @@ -0,0 +1,107 @@ + + + + + + jQuery Mobile Docs - Flip switch + + + + + + + + + +
+ +
+

Flip switch

+ Home +
+ +
+
+ +
+

Flip switch

+ + + +

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.

+

To create a flip toggle start with a select 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 for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

+ +
	
+<div data-role="fieldcontain">
+	<label for="slider">Flip Switch:</label>
+	<select name="slider" id="slider" data-role="slider">
+		<option value="on">On</option>
+		<option value="off">Off</option>
+	</select> 
+</div>
+
+

The flip toggle switch is displayed like this:

+
+ + +
+ + + +

Refreshing a flip switch

+ +

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:

+ +
+var myswitch = $("select#bar");
+myswitch[0].selectedIndex = 1;
+myswitch .slider("refresh");
+
 + +
+ +
+
+ +
+ +

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

+
+ +
+ + + + diff --git a/docs/forms/switch/methods.html b/docs/forms/switch/methods.html new file mode 100644 index 00000000000..42be64a2713 --- /dev/null +++ b/docs/forms/switch/methods.html @@ -0,0 +1,106 @@ + + + + + + jQuery Mobile Docs - Flip Switch Methods + + + + + + + + + +
+ +
+

Flip Switch

+ Home +
+ +
+
+ +
+ +

Flip Switch

+ + + +

The flip switch plugin has the following methods:

+ +
+
enable enable a disabled flip switch
+
+ 

+$('select').slider('enable');			
+
+
+ +
disable disable a flip switch.
+
+ 

+$('select').slider('disable');			
+
+
+ +
refresh update the flip switch
+
+ 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. + 

+//refresh value			
+$('select').slider('refresh');
+
+//refresh and force rebuild
+$('select').slider('refresh', true);
+
+
+ +
+ +
+
+ +
+ +
+ +

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

+
+ +
+ + + + diff --git a/docs/forms/switch/options.html b/docs/forms/switch/options.html new file mode 100644 index 00000000000..8dac381672e --- /dev/null +++ b/docs/forms/switch/options.html @@ -0,0 +1,99 @@ + + + + + + jQuery Mobile Docs - Flip Switch Options + + + + + + + + + +
+ +
+

Flip Switch

+ Home +
+ +
+
+ +
+ +

Flip Switch

+ + + +

The flip switch plugin has the following options:

+ +
+ + +
initSelector CSS selector string
+
+

default:jqmData(role='slider')"

+

This is used to define the selectors (element types, data roles, etc.) that should be used as the trigger to automatic initialization of the widget plugin. To affect all flip switches, this option can be set by binding to the mobileinit event:

+ 
$( document ).bind( "mobileinit", function(){
+	$.mobile.slider.prototype.options.initSelector = ".mySwitch";
+});
+
+
+ +
theme string
+
+

default: null, inherited from parent

+

Sets the theme swatch color scheme for the select element. This is a single letter from a-z that maps to the swatches included in your theme. By default, a flip switch will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: data-theme="a"

+ 
$('select').slider({ theme: "a" });
+
+ +
+ +
+
+ +
+ +
+ +

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

+
+ +
+ + + +