mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-27 15:23:59 +00:00
changed the folder name from 'sliders' to slider
This commit is contained in:
maggiewachs
parent
9acbcb3b15
commit
658433b89c
4 changed files with 417 additions and 0 deletions
101
docs/forms/slider/events.html
Normal file
101
docs/forms/slider/events.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Slider 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>Sliders</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>Slider</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>Bind events directly to the input element (the framework will automatically update the slider widget). Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<pre><code>
|
||||
$( ".selector" ).bind( "change", function(event, ui) {
|
||||
...
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<p>The slider plugin has the following custom event:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>create</code> triggered when a slider is created</dt>
|
||||
<dd>
|
||||
|
||||
<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="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.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>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
96
docs/forms/slider/index.html
Normal file
96
docs/forms/slider/index.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Sliders</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>Slider</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>Slider</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>To add a slider widget to your page, use a standard <code>input</code> with the <code>type="range"</code> attribute. The input's <code>value</code> is used to configure the starting position of the handle and the value populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. The framework will parse these attributes to configure the slider widget. </p>
|
||||
|
||||
<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>
|
||||
<p>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>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="25" min="0" max="100" />
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>The default slider is displayed like this:</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider-1">Input slider:</label>
|
||||
<input type="range" name="slider-1" id="slider-1" value="25" min="0" max="100" data-theme="b" data-track-theme="a" />
|
||||
</div>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</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="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.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>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
105
docs/forms/slider/methods.html
Normal file
105
docs/forms/slider/methods.html
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Slider 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>Slider</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>Slider</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 slider plugin has the following methods:</p>
|
||||
|
||||
<dl>
|
||||
<dt><code>enable</code> enable a disabled slider</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$('.selector').slider('enable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>disable</code> disable a slider</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$('.selector').slider('disable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>refresh</code> update the slider</dt>
|
||||
<dd>
|
||||
<p>The slider should be refreshed whenever the input's value is changed programmatically.</p>
|
||||
|
||||
<pre><code>
|
||||
$('.selector').slider('refresh');
|
||||
</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="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.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>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
115
docs/forms/slider/options.html
Normal file
115
docs/forms/slider/options.html
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Slider options</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>Slider</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>Slider</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" class="ui-btn-active">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>The slider plugin has the following options:</p>
|
||||
|
||||
<dl>
|
||||
<dt><code>disabled</code> <em>string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: false</p>
|
||||
<p>Sets the default state of the slider to disabled when "true".</p>
|
||||
<pre><code>$('.selector').slider(<strong>{ disabled: "true" }</strong>);</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>initSelector</code> <em>CSS selector string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
|
||||
<p>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 <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
|
||||
<pre><code>$( document ).bind( "mobileinit", function(){
|
||||
<strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
|
||||
});
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>theme</code> <em>string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: null, inherited from parent</p>
|
||||
<p>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.</p>
|
||||
<pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
|
||||
<p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-theme="a"</code>.</p>
|
||||
</dd>
|
||||
|
||||
<dt><code>trackTheme</code> <em>string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: null, inherited from parent</p>
|
||||
<p>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.</p>
|
||||
<pre><code>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
|
||||
<p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme="a"</code>.</p>
|
||||
</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="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.html">Slider</a></li>
|
||||
<li><a href="../forms-switch.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>© 2011 The jQuery Project</p>
|
||||
</div>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in a new issue