diff --git a/docs/forms/checkboxes/events.html b/docs/forms/checkboxes/events.html index 89e59496..30679c5d 100644 --- a/docs/forms/checkboxes/events.html +++ b/docs/forms/checkboxes/events.html @@ -73,9 +73,9 @@ $("input[type='checkbox']").checkboxradio({
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/checkboxes/index.html b/docs/forms/checkboxes/index.html index 08ad1828..5fcde435 100755 --- a/docs/forms/checkboxes/index.html +++ b/docs/forms/checkboxes/index.html @@ -127,9 +127,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/checkboxes/methods.html b/docs/forms/checkboxes/methods.html index 9d1fd0e3..edbf4f6c 100644 --- a/docs/forms/checkboxes/methods.html +++ b/docs/forms/checkboxes/methods.html @@ -77,9 +77,9 @@ $("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/checkboxes/options.html b/docs/forms/checkboxes/options.html index 1596e5fd..b4bcae21 100644 --- a/docs/forms/checkboxes/options.html +++ b/docs/forms/checkboxes/options.html @@ -62,9 +62,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/forms-switch.html b/docs/forms/forms-switch.html deleted file mode 100755 index 12764fec..00000000 --- a/docs/forms/forms-switch.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - jQuery Mobile Docs - Flip switch - - - - - - - - - -
    - -
    -

    Flip switch

    -
    - -
    -
    - -
    - -

    Flip toggle switches

    -

    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, To add a slider widget to your page, start with an 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">Select slider:</label>
-	<select name="slider" id="slider" data-role="slider">
-		<option value="off">Off</option>
-		<option value="on">On</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/radiobuttons/events.html b/docs/forms/radiobuttons/events.html index dfc52c33..31962ffe 100644 --- a/docs/forms/radiobuttons/events.html +++ b/docs/forms/radiobuttons/events.html @@ -75,9 +75,9 @@ $("input[type='radio']").checkboxradio({
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/radiobuttons/index.html b/docs/forms/radiobuttons/index.html index e1ec3b1f..2fac9cee 100755 --- a/docs/forms/radiobuttons/index.html +++ b/docs/forms/radiobuttons/index.html @@ -127,9 +127,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/radiobuttons/methods.html b/docs/forms/radiobuttons/methods.html index c1fb09e3..7fa9a9f6 100644 --- a/docs/forms/radiobuttons/methods.html +++ b/docs/forms/radiobuttons/methods.html @@ -77,9 +77,9 @@ $("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/radiobuttons/options.html b/docs/forms/radiobuttons/options.html index ec480904..391b94cc 100644 --- a/docs/forms/radiobuttons/options.html +++ b/docs/forms/radiobuttons/options.html @@ -62,9 +62,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/search/events.html b/docs/forms/search/events.html index 002fdad1..a90d7837 100644 --- a/docs/forms/search/events.html +++ b/docs/forms/search/events.html @@ -3,7 +3,7 @@ - jQuery Mobile Docs - Text Input events + jQuery Mobile Docs - Search Input events @@ -72,9 +72,9 @@ $( ".selector" ).textinput({
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/search/index.html b/docs/forms/search/index.html index f2b85314..4115cef5 100755 --- a/docs/forms/search/index.html +++ b/docs/forms/search/index.html @@ -82,9 +82,9 @@ $('.mySearchInput').textinput();
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/search/methods.html b/docs/forms/search/methods.html index 70bef533..a12f77b6 100644 --- a/docs/forms/search/methods.html +++ b/docs/forms/search/methods.html @@ -3,7 +3,7 @@ - jQuery Mobile Docs - Text Input methods + jQuery Mobile Docs - Search Input methods @@ -69,9 +69,9 @@ $('.selector').textinput('disable');
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/search/options.html b/docs/forms/search/options.html index 58f2af1f..deee3d71 100644 --- a/docs/forms/search/options.html +++ b/docs/forms/search/options.html @@ -3,7 +3,7 @@ - jQuery Mobile Docs - Text Input options + jQuery Mobile Docs - Text Search options @@ -71,9 +71,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/selects/events.html b/docs/forms/selects/events.html index 1335b30d..49faf178 100644 --- a/docs/forms/selects/events.html +++ b/docs/forms/selects/events.html @@ -74,9 +74,9 @@ $( ".selector" ).selectmenu({
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/selects/index.html b/docs/forms/selects/index.html index 38387e59..1d97d688 100644 --- a/docs/forms/selects/index.html +++ b/docs/forms/selects/index.html @@ -451,9 +451,9 @@ $('select').selectmenu();
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/selects/methods.html b/docs/forms/selects/methods.html index 3b6e59b4..3003bf8b 100644 --- a/docs/forms/selects/methods.html +++ b/docs/forms/selects/methods.html @@ -95,9 +95,9 @@ $('select').selectmenu('refresh', true);
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/selects/options.html b/docs/forms/selects/options.html index 8dab5cc7..7727705c 100644 --- a/docs/forms/selects/options.html +++ b/docs/forms/selects/options.html @@ -121,9 +121,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/slider/events.html b/docs/forms/slider/events.html index 48a289df..2675f265 100644 --- a/docs/forms/slider/events.html +++ b/docs/forms/slider/events.html @@ -16,7 +16,7 @@
    -

    Sliders

    +

    Slider

    Home
    @@ -73,9 +73,9 @@ $( ".selector" ).slider({
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/slider/index.html b/docs/forms/slider/index.html index 2791ecd5..015a713c 100644 --- a/docs/forms/slider/index.html +++ b/docs/forms/slider/index.html @@ -3,7 +3,7 @@ - jQuery Mobile Docs - Sliders + jQuery Mobile Docs - Slider @@ -56,7 +56,7 @@

    Calling the slider plugin

    -

    This plugin will auto initialize on any page that contains a text input, no need for a data-role attribute in the markup. However, if needed you can directly call the slider plugin on any selector, just like any jQuery plugin:

    +

    This plugin will auto initialize on any page that contains a text input with the type="range" attribute. However, if needed you can directly call the slider plugin on any selector, just like any jQuery plugin:

    
 $('input').slider();
    @@ -76,9 +76,9 @@ $('input').slider();
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/slider/methods.html b/docs/forms/slider/methods.html index 3d4c445a..3c9131dd 100644 --- a/docs/forms/slider/methods.html +++ b/docs/forms/slider/methods.html @@ -16,7 +16,7 @@
    -

    Slider

    +

    Slider

    Home
    @@ -77,9 +77,9 @@ $('.selector').slider('refresh');
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/slider/options.html b/docs/forms/slider/options.html index ac8a5d46..dbae51ab 100644 --- a/docs/forms/slider/options.html +++ b/docs/forms/slider/options.html @@ -16,7 +16,7 @@
    -

    Slider

    +

    Slider

    Home
    @@ -86,9 +86,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/switch/events.html b/docs/forms/switch/events.html new file mode 100644 index 00000000..e3c54890 --- /dev/null +++ b/docs/forms/switch/events.html @@ -0,0 +1,101 @@ + + + + + + jQuery Mobile Docs - Slider events + + + + + + + + + +
    + +
    +

    Flip Toggle Switch

    + Home +
    + +
    +
    + +
    + +

    Flip toggle switch

    + + + +

    Bind events directly to the select element. Use jQuery Mobile's virtual events, or bind standard JavaScript events, like change, focus, blur, etc.:

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

    The slider plugin has the following custom event:

    + +
    + +
    create triggered when a slider is created
    +
    + + 
    
+$( ".selector" ).slider({
+   create: function(event, ui) { ... }
+});		
+
    +
    + + +
    + +
    +
    + +
    + + +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + + diff --git a/docs/forms/switch/index.html b/docs/forms/switch/index.html new file mode 100644 index 00000000..e0b2f2b6 --- /dev/null +++ b/docs/forms/switch/index.html @@ -0,0 +1,106 @@ + + + + + + jQuery Mobile Docs - Sliders + + + + + + + + + +
    + +
    +

    Flip Toggle Switch

    + Home +
    + +
    +
    + +
    +

    Flip toggle switch

    + + + +

    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.

    + +

    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 accordingly. 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">Select slider:</label>
+	<select name="slider" id="slider" data-role="slider">
+		<option value="off">Off</option>
+		<option value="on">On</option>
+	</select> 
+</div>
+
    +

    The flip toggle switch is displayed like this:

    +
    + + +
    + + +

    Calling the switch plugin

    + +

    This plugin will auto initialize on any page that contains a select with the data-role="slider" attribute. However, if needed you can directly call the slider plugin on any selector, just like any jQuery plugin:

    +
    
+$('select').slider();			
+
    + +
    +
    + +
    + + +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + + diff --git a/docs/forms/switch/methods.html b/docs/forms/switch/methods.html new file mode 100644 index 00000000..ee4d031e --- /dev/null +++ b/docs/forms/switch/methods.html @@ -0,0 +1,105 @@ + + + + + + jQuery Mobile Docs - Slider methods + + + + + + + + + +
    + +
    +

    Flip Toggle Switch

    + Home +
    + +
    +
    + +
    + +

    Flip toggle switch

    + + + +

    The slider plugin has the following methods:

    + +
    +
    enable enable a disabled slider
    +
    + 
    
+$('.selector').slider('enable');			
+
    +
    + +
    disable disable a slider
    +
    + 
    
+$('.selector').slider('disable');			
+
    +
    + +
    refresh update the slider
    +
    +

    If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.

    + + 
    			
+$('.selector').slider('refresh');
+
    +
    + +
    + +
    +
    + +
    + + +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + + diff --git a/docs/forms/switch/options.html b/docs/forms/switch/options.html new file mode 100644 index 00000000..e40fd2df --- /dev/null +++ b/docs/forms/switch/options.html @@ -0,0 +1,114 @@ + + + + + + jQuery Mobile Docs - Slider options + + + + + + + + + +
    + +
    +

    Flip Toggle Switch

    + Home +
    + +
    +
    + +
    + +

    Flip toggle switch

    + + + +

    The slider plugin has the following options:

    + +
    +
    disabled string
    +
    +

    default: false

    +

    Sets the default state of the slider to disabled when "true".

    + 
    $('.selector').slider({ disabled: "true" });
    +
    + +
    initSelector CSS selector string
    +
    +

    default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"

    +

    This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the mobileinit event:

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

    default: null, inherited from parent

    +

    Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it 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"

    + 
    $('.selector').slider({ theme: "a" });
    +
    + +
    trackTheme string
    +
    +

    default: null, inherited from parent

    +

    Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.

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

    This option can be overridden in the markup by assigning a data attribute to the input, e.g. data-track-theme="a".

    +
    + +
    + +
    +
    + +
    + + +
    + +
    + +
    +

    © 2011 The jQuery Project

    +
    + +
    + + + + diff --git a/docs/forms/textinputs/events.html b/docs/forms/textinputs/events.html index 7d06d72c..9309a5cc 100644 --- a/docs/forms/textinputs/events.html +++ b/docs/forms/textinputs/events.html @@ -72,9 +72,9 @@ $( ".selector" ).textinput({
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/textinputs/index.html b/docs/forms/textinputs/index.html index b2d17842..1144ccf9 100755 --- a/docs/forms/textinputs/index.html +++ b/docs/forms/textinputs/index.html @@ -123,9 +123,9 @@ $('input').textinput();
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/textinputs/methods.html b/docs/forms/textinputs/methods.html index f60d1441..9226f3e8 100644 --- a/docs/forms/textinputs/methods.html +++ b/docs/forms/textinputs/methods.html @@ -69,9 +69,9 @@ $('.selector').textinput('disable');
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/docs/forms/textinputs/options.html b/docs/forms/textinputs/options.html index 9b77b31f..66ae8f9a 100644 --- a/docs/forms/textinputs/options.html +++ b/docs/forms/textinputs/options.html @@ -71,9 +71,9 @@
  • Form basics
  • Form element gallery
  • Text inputs
    • -
  • Search inputs
    • +
  • Search input
  • Slider
    • -
  • Flip toggle switch
    • +
  • Flip toggle switch
  • Radio buttons
  • Checkboxes
  • Select menus
    • diff --git a/themes/default/jquery.mobile.button.css b/themes/default/jquery.mobile.button.css index c705112d..ea64e818 100644 --- a/themes/default/jquery.mobile.button.css +++ b/themes/default/jquery.mobile.button.css @@ -9,7 +9,7 @@ .ui-btn-inline { display: inline-block; } .ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; } .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; } -.ui-btn-icon-notext { width: 24px; height: 24px; text-indent: -9999px; } +.ui-btn-icon-notext { width: 24px; height: 24px; } .ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; } .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999px; } .ui-btn-icon-left .ui-btn-inner { padding-left: 33px; } @@ -35,6 +35,8 @@ .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; } .ui-btn-icon-left .ui-icon { left: 10px; } .ui-btn-icon-right .ui-icon { right: 10px; } +.ui-btn-icon-top .ui-icon { top: 10px; } +.ui-btn-icon-bottom .ui-icon { bottom: 10px; } .ui-header .ui-btn-icon-left .ui-icon, .ui-footer .ui-btn-icon-left .ui-icon, .ui-bar .ui-btn-icon-left .ui-icon { left: 4px; } @@ -47,7 +49,6 @@ .ui-header .ui-btn-icon-bottom .ui-icon, .ui-footer .ui-btn-icon-bottom .ui-icon, .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4px; } -.ui-btn-icon-top .ui-icon { top: 5px; } -.ui-btn-icon-bottom .ui-icon { bottom: 5px; } + /*hiding native button,inputs */ .ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: transparent; font-size: 1px; border: none; line-height: 999px; }