|
1 | 1 | <?xml version="1.0"?>
|
2 | 2 | <?xml-stylesheet type="text/xsl" href="../entries2html.xsl" ?>
|
3 |
| -<entry name="slider" namespace="fn" type="widget" widgetnamespace="mobile" event-prefix="slide" init-selector="input[type='range'], :jqmData(type='range'), :jqmData(role='slider')" deprecated="1.4.0"> |
| 3 | +<entry name="slider" namespace="fn" type="widget" widgetnamespace="mobile" event-prefix="slide" init-selector="input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"> |
4 | 4 | <title>Slider Widget</title>
|
5 | 5 | <desc>Creates a slider widget</desc>
|
6 | 6 | <longdesc>
|
7 | 7 | <h2>Slider</h2>
|
8 |
| - <div class="warning"> |
9 |
| - <p><strong>Note:</strong> The <placeholder name="name"/> widget is deprecated as of jQuery Mobile 1.4.0.</p> |
10 |
| - </div> |
| 8 | + |
11 | 9 | <p>To add a slider widget to your page, use a standard input with the <code>type="range"</code> attribute. The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. If you want to constrain input to specific increments, add the <code>step</code> attribute. Set the <code>value</code> attribute to define the initial value. The framework will parse these attributes to configure the slider widget.</p>
|
12 | 10 | <p>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.</p>
|
13 | 11 | <p>Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
|
@@ -100,6 +98,10 @@ $( "input" ).slider();
|
100 | 98 |
|
101 | 99 | <h2>Flip Toggle Switch</h2>
|
102 | 100 |
|
| 101 | + <div class="warning"> |
| 102 | + <p><strong>Note:</strong> The flip toggle switch feature is deprecated as of jQuery Mobile 1.4.0. Use the Flipswitch widget instead.</p> |
| 103 | + </div> |
| 104 | + |
103 | 105 | <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>
|
104 | 106 | <p>To create a flip toggle, start with a <code>select</code> with two options. The first option will be styled as the "off" state switch and the second will be styled as the "on" state so write your options accordingly.</p>
|
105 | 107 | <p>Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
|
|
0 commit comments