diff --git a/docs/forms/slider/events.html b/docs/forms/slider/events.html new file mode 100644 index 00000000..004423ac --- /dev/null +++ b/docs/forms/slider/events.html @@ -0,0 +1,101 @@ + + + + + + jQuery Mobile Docs - Slider events + + + + + + + + + +
+ +
+

Sliders

+ Home +
+ +
+
+ +
+ +

Slider

+ + + +

Bind events directly to the input element (the framework will automatically update the slider widget). 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) { ... }
+});		
+
+
+ + +
+ +
+
+ +
+ +
+ +

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

+
+ +
+ + + + diff --git a/docs/forms/slider/index.html b/docs/forms/slider/index.html new file mode 100644 index 00000000..198b1f47 --- /dev/null +++ b/docs/forms/slider/index.html @@ -0,0 +1,96 @@ + + + + + + jQuery Mobile Docs - Sliders + + + + + + + + + +
+ +
+

Slider

+ Home +
+ +
+
+ +
+

Slider

+ + + +

To add a slider widget to your page, use a standard input with the type="range" attribute. The input's value is used to configure the starting position of the handle and the value populated in the text input. Specify min and max attribute values to set the slider's range. The framework will parse these attributes to configure the slider widget.

+ +

As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.

+

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">Input slider:</label>
+   <input type="range" name="slider" id="slider" value="25" min="0" max="100"  />
+</div>
+
+ +

The default slider is displayed like this:

+
+ + +
+ +

Sliders also respond to key commands. Right Arrow, Up Arrow, and Page Up keys increase the value; Left Arrow, Down Arrow, and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.

+ +
+
+ +
+ +
+ +

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

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

Slider

+ Home +
+ +
+
+ +
+ +

Slider

+ + + +

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
+
+

The slider should be refreshed whenever the input's value is changed programmatically.

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

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

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

Slider

+ Home +
+ +
+
+ +
+ +

Slider

+ + + +

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 affect all selects, this option can be set by binding 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.

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

This option can be overridden in the markup by assigning a data attribute to the input, e.g. data-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".

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

More in this section

+ + +
+
+ +
+ +
+

© 2011 The jQuery Project

+
+ +
+ + + +