This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. </desc>
<desc>Handles the task of displaying the loading dialog when jQuery Mobile pulls in content via AJAX. </desc>
<longdesc>
<h2>The Loader Widget</h2>
<p>The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. The loader dialog was previously configured globally with three settings <code>$.mobile.loadingMessage</code>, <code>$.mobile.loadingMessageTextVisible</code>, and <code>$.mobile.loadingMessageTheme</code> which are now deprecated. In addition to the methods for showing and hiding, <code>$.mobile.showPageLoadingMsg</code> and <code>$.mobile.hidePageLoadingMsg</code> are also deprecated.</p>
<p>The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the <code>$.mobile.loading</code> helper method (See the global method docs).</p>
<p>The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via AJAX. It can also be displayed manually for custom loading actions using the <code>$.mobile.loading</code> helper method (See the global method docs).</p>
<p>To configure the loading dialog globally the following settings can be defined on its prototype during the <code>mobileinit</code> event.</p> Below are the defaults:
<p>These settings will be overridden by the deprecated settings to preserve backward compatibility. Once the deprecated settings are removed these defaults will only be superseded by the method params object described in the global method docs under <code>$.mobile.loading</code>.</p>
<p>These defaults will only be superseded by the method params object described in the global method docs under <code>$.mobile.loading</code>.</p>
<optionname="html"default='""'example-value='"<span class="ui-icon ui-icon-loading"><img src="jquery-logo.png" /><h2>is loading for you ...</h2></span>"'>
<desc>If this is set to a non empty string value, it will be used to replace the entirety of the loader's inner html.</desc>
<typename="string" />
@@ -47,10 +48,7 @@ $.mobile.loading( "show", {
<desc>If true, the text value will be used under the spinner.</desc>
<desc>Sets the color scheme (swatch) for the loading message. It accepts a single letter from a-z that maps to the swatches included in your theme.</desc>
<desc><pclass="ui-body ui-body-e"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loading( "hide" )</code> instead, see examples above</p>
Hide the loader message, which is configurable via $.mobile.loadingMessage.
<pre><code><![CDATA[
//hide the page loader
$.mobile.hidePageLoadingMsg();
]]></code></pre>
</desc>
</method>
<methodname="loading">
<desc>Show or hide the loader message, which is configurable via <code>$.mobile.loader</code> prototype options as described in the widget docs or can be controlled via a params object.
</desc>
@@ -95,18 +84,6 @@ $.mobile.hidePageLoadingMsg();
<desc>
</desc>
</method>
<methodname="showPageLoadingMsg">
<desc><pclass="ui-body ui-body-e"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loading( "show" )</code> instead, see examples above</p>
Show the loader message, which is configurable via $.mobile.loadingMessage.
<pre><code><![CDATA[
//cue the page loader
$.mobile.showPageLoadingMsg();
//use theme swatch "b", a custom message, and no spinner
$.mobile.showPageLoadingMsg( "b", "This is only a test", true );
]]></code></pre>
</desc>
</method>
</methods>
<example>
<height>410</height>
@@ -115,14 +92,11 @@ $.mobile.showPageLoadingMsg( "b", "This is only a test", true );
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Event indicating that jQuery Mobile has finished loading.</desc>
<longdesc>
<p>This event is triggered after jQuery Mobile has finished loading, but before it has started enhancing the start page. Thus, handlers of this event have the opportunity to modify jQuery Mobile's global configuration <ahref="/global-config/">options</a> and all the widgets' default option values before they influence the library's behavior.</p>
<p>You must connect a handler to the <placeholdername="name"/> event before you load jQuery Mobile, because it is triggered as part of the library's loading process. The easiest way of achieving this is to place a <code>script</code> tag after the <code>script</code> tag that loads jQuery, and before the <code>script</code> tag that loads jQuery Mobile:
<pre><code><![CDATA[
<!doctype html>
<html>
<head>
<title>Example illustrating use of the "mobileinit" event</title>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>Note that this on applies to navbars that are inside a page. If you use a true persistent toolbar that lives outside the page and want to set current item to the active state, you have to add a script that adds the <code>class="ui-btn-active"</code> class.</p>
<p>The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:
<p>Navbars inherit the theme swatch from their parent container, just like buttons. If a navbar is placed in the header or footer toolbar, it will inherit the default toolbar swatch "a" for bars unless you set this in the markup. </p>
<p>Here are a few examples of navbars in various container swatches that automatically inherit their parent's swatch letter. Note that in these examples, instead of using a <code>data-theme</code> attribute, we're manually adding the swatch classes to apply the body swatch (<code>ui-body-a</code>) and the class to add the standard body padding (ui-body), but the inheritance works the same way:</p>
<p>To set the theme color for a navbar item, add the <code>data-theme</code> attribute to the individual links and specify a theme swatch. Note that applying a theme swatch to the navbar container is <em>not</em> supported.</p>
<desc>Positions the icon in the button. Possible values: left, right, top, bottom, none, notext. The notext value will display an icon-only button with no text feedback.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>The page widget is responsible for managing a single item in jQuery Mobile's page-based architecture. It is designed to support either single page widgets within a HTML document, or multiple local internal linked page widgets within a HTML document.</p>
<p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
<p><strong>Caveat:</strong> Documents containing multiple pages cause Internet Explorer 7 to exhibit incorrect behavior when its "Back" button is pressed. In particular, if the user navigates between several of the pages internal to the document that has been loaded and then clicks the "Back" button to return to the start page, there will be occasions when clicking the "Back" button does not cause a return to the previous page. However, clicking the "Back" button enough times will eventually return the user through the performed navigation sequence back to the start page.</p>
<p>Thus, if Internet Explorer 7 represents a significant proportion of the targeted user base, we recommended that pages be organized as individual HTML documents containing single page widgets, rather than as a single HTML document containing multiple internal pages.</p>
<p>The page widget will auto-enhance its content upon creation. This means that it will instantiate widgets on its child elements by invoking <ahref="/enhanceWithin/"><code>.enhanceWithin()</code></a> on itself.</p>
<h3>Dialogs</h3>
<p>The <placeholdername="name"/> widget has the option <code>dialog</code> which you can set to <code>true</code> to obtain a page styled like a dialog, such as in the example below:
<pre><code><![CDATA[
<div data-role="page" data-dialog="true">
<div data-role="header">
<h2>Are you sure?</h2>
</div>
<div class="ui-content" role="main">
<h2>Are you sure you wish to exit the application?</h2>
<p>You have unsaved changes. If you exit without saving them, you will lose them.</p>
<desc>This option is provided by the <code>dialog</code> extension.
<p>Customizes the text of the close button which is helpful for translating this into different languages. The close button is displayed as an icon-only button by default so the text isn't visible on-screen, but is read by screen readers so this is an important accessibility feature.</p>
<p>This option is also exposed as a data attribute: <code>data-close-btn-text="Fermer"</code>.</p>
</desc>
<typename="String" />
</option>
<optionname="contentTheme"type="String"default="null, inherited from parent"example-value='"b"'deprecated="1.4.0">
<desc>
<strong>This option is deprecated in 1.4.0 and will be removed in 1.5.0.</strong>
<p>Sets the color scheme (swatch) for the content <code>div</code> of the <placeholdername="name" /> widget. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-content-theme="b"</code>.</p>
<p><strong>This option is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use <ahref="/global-config/#degradeInputs"><code>$.mobile.degradeInputs</code></a> instead.</strong></p>
<p><strong>This option is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use <code>$.mobile.keepNative</code> instead.</strong></p>
<p>The value of this option is a selector that will be used in addition to the <ahref="#option-keepNativeDefault">keepNativeDefault</a> option to prevent elements matching it from being enhanced.</p>
<p>This option is also exposed as a data attribute: <code>data-keep-native=".do-not-enhance</code>.</p>
<p><strong>This option is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use <code>$.mobile.keepNative</code> instead.</strong></p>
<p>The value of this option is a selector that will be used to prevent elements matching it from being enhanced.</p>
<p>This option is also exposed as a data attribute: <code>data-keep-native-default=".do-not-enhance"</code>.</p>
<p>This option is also exposed as a data attribute: <code>data-keep-native-default=".do-not-enhance</code>.</p>
<desc>This option is provided by the <code>dialog</code> extension.
<p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the data-overlay-theme attribute can be added to the element to set the overlay to any swatch letter.</p>
<p> Possible values: swatch letter (a-z)</p>
<p>This option is also exposed as a data attribute: <code>data-overlay-theme="b"</code>.</p>
<p>Sets the swatch that will be used to draw the page.</p>
<p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
Sets the color scheme (swatch) for the <placeholdername="name" /> widget. It accepts a single letter from a-z that maps to the swatches included in your theme.
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-theme="b"</code>.</p>
</desc>
<typename="String" />
</option>
@@ -50,14 +144,33 @@
</event>
</events>
<methods>
<methodname="keepNativeSelector">
<desc>Returns the selector used to filter elements which are not to be enhanced.</desc>
<methodname="bindRemove">
<desc>Instruct the page to remove itself when it is hidden.
<p>Pages have both <code>data-external-page="true"</code> and <code>data-dom-cache="false"</code> when you call bindRemove(), otherwise the method will do nothing.</p>
<desc>An optional callback to replace the internal handling of the page removal. The internal callback only removes the page if it is not being hidden as part of a same-page transition.</desc>
</argument>
</signature>
</method>
<methodname="removeContainerBackground">
<desc>Removes the background swatch from the page widget's container (usually the body).</desc>
<strong>This method is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. The new <ahref="/global-config/#keepNative">keepNative</a> option replaces it.</strong>
<p>Returns the selector used to filter elements which are not to be enhanced.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Triggered before any load request is made.</desc>
<longdesc>
<p>Callbacks bound to this event can call <code>preventDefault()</code> on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call <code>resolve()</code> or <code>reject()</code> on the deferred object reference contained in the data object passed to the callback.</p>
<p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
<ul>
<li><code>url</code> (string)
<ul>
<li>The absolute or relative URL that was passed into <code>$.mobile.loadPage()</code> by the caller.</li>
</ul>
</li>
<li><code>absUrl</code> (string)
<ul>
<li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
</ul>
</li>
<li><code>dataUrl</code> (string)
<ul>
<li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
</ul>
</li>
<li><code>deferred</code> (object)
<ul>
<li>Callbacks that call <code>preventDefault()</code> on the event, *MUST* call <code>resolve()</code> or <code>reject()</code> on this object so that <code>changePage()</code> requests resume processing. Deferred object observers expect the deferred object to be resolved like this:
<pre><code>
$( document ).on( "pagebeforeload", function( event, data ) {
// Let the framework know we're going to handle the load.
event.preventDefault();
// ... load the document then insert it into the DOM ...
// at some point, either in this callback, or through
// some other async means, call resolve, passing in
// the following args, plus a jQuery collection object
<li>This object contains the options that were passed into $.mobile.loadPage().</li>
</ul>
</li>
</ul>
<strong>Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.5.0.</strong>
<p>The replacement for <placeholdername="name"/> is <ahref="/pagecontainer/#event-beforeload">pagecontainerbeforeload</a>. In jQuery Mobile 1.4.0, the two events are identical except for their name.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>This event is triggered when the changePage() request fails to load the page. Callbacks for this particular event will be passed a data object as the 2nd arg.</desc>
<desc>Triggered when the changePage() request fails to load the page.</desc>
<longdesc>
<p>The properties for this object are as follows:</p>
<ul>
<li><code>toPage</code> (object or string)
<ul>
<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the <code>changePage()</code> call that triggered the event.</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the configuration options to be used for the current <code>changePage()</code> call.</li>
</ul>
</li>
</ul>
<strong>Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.5.0.</strong>
<p>The replacement for <placeholdername="name"/> is <ahref="/pagecontainer/#event-changefailed">pagecontainerchangefailed</a>. In jQuery Mobile 1.4.0, the two events are identical except for their name.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Triggered on the "fromPage" after the transition animation has completed.</desc>
<longdesc>
<p>Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it: </p>
<ul>
<li><code>nextPage</code> (object)
<ul>
<li>A jQuery collection object that contains the page DOM element that we just transitioned to.</li>
</ul>
</li>
</ul>
<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
<p>You can access the <code>prevPage</code> or <code>nextPage</code> properties via the second argument of a bound callback function. For example: </p>
alert( "This page was just shown: " + ui.nextPage );
});
</code></pre>
<p>Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes. This can be done in the <code>mobileinit</code> handler, as described on the global config page.</p>
<strong>Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.5.0.</strong>
<p>The replacement for <placeholdername="name"/> is <ahref="/pagecontainer/#event-hide">pagecontainerhide</a>. In jQuery Mobile 1.4.0, the two events are identical except for their name.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alert( "This page was just enhanced by jQuery Mobile!" );
});
]]></code></pre>
<divclass="warning"><b>Note:</b> This event has been deprecated in 1.4.0 in favor of <code>pagecreate</code>. Simply replace <code>pageinit</code> in the above example.</div>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Triggered after the page is successfully loaded and inserted into the DOM.</desc>
<longdesc>
<p>Callbacks bound to this event will be passed a data object as its 2nd arg. This object contains the following information:</p>
<ul>
<li><code>url</code> (string)
<ul>
<li>The absolute or relative URL that was passed into <code>$.mobile.loadPage()</code> by the caller.</li>
</ul>
</li>
<li><code>absUrl</code> (string)
<ul>
<li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
</ul>
</li>
<li><code>dataUrl</code> (string)
<ul>
<li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the options that were passed into <code>$.mobile.loadPage()</code>.</li>
</ul>
</li>
<li><code>xhr</code> (object)
<ul>
<li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the 3rd argument to the framework's <code>$.ajax()</code> success callback.</li>
</ul>
</li>
<li><code>textStatus</code> (null or string)
<ul>
<li>According to the jQuery Core <ahref="//api.jquery.com/jQuery.ajax/">documentation</a>, this will be a string describing the status. This is what gets passed as the 2nd argument to the framework's <code>$.ajax()</code> error callback.</li>
</ul>
</li>
</ul>
<strong>Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.5.0.</strong>
<p>The replacement for <placeholdername="name"/> is <ahref="/pagecontainer/#event-load">pagecontainerload</a>. In jQuery Mobile 1.4.0, the two events are identical except for their name.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Triggered if the page load request failed.</desc>
<longdesc>
<p>By default, after dispatching this event, the framework will display a page failed message and call reject() on the deferred object contained within the event's data object. Callbacks can prevent this default behavior from executing by calling <code>preventDefault()</code> on the event.</p>
<p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
<ul>
<li><code>url</code> (string)
<ul>
<li>The absolute or relative URL that was passed into <code>$.mobile.loadPage()</code> by the caller.</li>
</ul>
</li>
<li><code>absUrl</code> (string)
<ul>
<li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
</ul>
</li>
<li><code>dataUrl</code> (string)
<ul>
<li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
</ul>
</li>
<li><code>deferred</code> (object)
<ul>
<li>Callbacks that call <code>preventDefault()</code> on the event, *MUST* call <code>resolve()</code> or <code>reject()</code> on this object so that <code>changePage()</code> requests resume processing. Deferred object observers expect the deferred object to be resolved like this:
<pre><code>
$( document ).on( "pageloadfailed", function( event, data ) {
// Let the framework know we're going to handle things.
event.preventDefault();
// ... attempt to load some other page ...
// at some point, either in this callback, or through
// some other async means, call resolve, passing in
// the following args, plus a jQuery collection object
<li>This object contains the options that were passed into <code>$.mobile.loadPage()</code>.</li>
</ul>
</li>
<li><code>xhr</code> (object)
<ul>
<li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the first argument to the framework's <code>$.ajax()</code> error callback.</li>
</ul>
</li>
<li><code>textStatus</code> (null or string)
<ul>
<li>According to the jQuery Core <ahref="//api.jquery.com/jQuery.ajax/">documentation</a>, possible values for this property, aside from null, are "timeout", "error", "abort", and "parsererror". This is what gets passed as the 2nd argument to the framework's <code>$.ajax()</code> error callback.</li>
<li>According to the jQuery Core <ahref="//api.jquery.com/jQuery.ajax/">documentation</a>, this property may be an exception object if one occurred, or if an HTTP error occurred this will be set to the textual portion of the HTTP status. This is what gets passed as the 3rd argument to the framework's <code>$.ajax()</code> error callback.</li>
</ul>
</li>
</ul>
<strong>Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.5.0.</strong>
<p>The replacement for <placeholdername="name"/> is <ahref="/pagecontainer/#event-load">pagecontainerloadfailed</a>. In jQuery Mobile 1.4.0, the two events are identical except for their name.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Triggered on the "toPage" after the transition animation has completed.</desc>
<desc>Triggered on the "toPage" after the transition animation has completed.</desc>
<longdesc>
<p>Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it: </p>
<ul>
<li><code>prevPage</code> (object)
<ul>
<li>A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
</ul>
</li>
</ul>
<p>You can access the <code>prevPage</code> or <code>nextPage</code> properties via the second argument of a bound callback function. For example: </p>
alert( "This page was just shown: " + ui.nextPage );
});
</code></pre>
<p>Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes. This can be done in the <code>mobileinit</code> handler, as described on the global config page.</p>
<strong>Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.5.0.</strong>
<p>The replacement for <placeholdername="name"/> is <ahref="/pagecontainer/#event-show">pagecontainershow</a>. In jQuery Mobile 1.4.0, the two events are identical except for their name.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>The rangeslider widget can be considered as a double handle slider. To add a rangeslider widget to your page, use two standard inputs with the <code>type="range"</code> attribute, and put them inside a <code><div></code> container. The input values are used to configure the starting position of the handles and the values are populated in the corresponding text inputs (the first one at the beginning of the rangeslider, and the second one at the end). Specify <code>min</code> and <code>max</code> attribute values to set the rangeslider's range. If you want to constrain inputs to specific increments, add the <code>step</code> attribute. Set the <code>value</code> attribute to each input to define their initial value. The framework will parse these attributes to configure the rangeslider widget.</p>
<h2>Range Slider</h2>
<divclass="warning">
<p><strong>Note: </strong>The <placeholdername="name"/> widget is deprecated as of jQuery Mobile 1.4.0.</p>
</div>
<p>The rangeslider widget can be considered as a double handle slider. To add a rangeslider widget to your page, use two standard inputs with the <code>type="range"</code> attribute, and put them inside a <code><div></code> container. The input values are used to configure the starting position of the handles and the values are populated in the corresponding text inputs (the first one at the beginning of the rangeslider, and the second one at the end). Specify <code>min</code> and <code>max</code> attribute values to set the rangeslider's range. If you want to constrain inputs to specific increments, add the <code>step</code> attribute. Set the <code>value</code> attribute on each input to define their initial value. The framework will parse these attributes to configure the rangeslider widget.</p>
<p>As you drag the rangeslider's handles, the framework will update the native input values (and vice-versa) so they are always in sync; this ensures that the values are submitted with the form.</p>
<p>Set the <code>for</code> attribute of the <code>labels</code> to match the <code>ids</code> of the <code>inputs</code> so they are semantically associated. It's possible to accessibly hide the labels if they're not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
<p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input without any need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the input and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them. </p>
<p>Set the <code>for</code> attribute of the <code>labels</code> to match the <code>ids</code> of the <code>inputs</code> so they are semantically associated. It's possible to accessibly hide the labels if they're not desired in the page layout, but we require that they are present in the markup for semantic and accessibility reasons.</p>
<p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input without any need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add the <code>data-role="none"</code> attribute to the inputs.</p>
<p>In this example, the acceptable range is 0-100.</p>
<pre><code><![CDATA[
@@ -40,7 +44,7 @@
<h3>Fill highlight</h3>
<p>By default, there is a highlight fill on the track between the two slider handles. To remove it, add the <code>data-highlight="false"</code> attribute to the input. The fill uses active state swatch. </p>
<p>By default, there is a highlight fill on the track between the two slider handles. To remove it, add the <code>data-highlight="false"</code> attribute to the input. The fill uses the active state swatch. </p>
<p>To set the theme swatch for the rangeslider, add a <code>data-theme</code> attribute to the <code>inputs</code> which will apply the theme to the inputs, handles and track. The track swatch can be set separately by adding the <code>data-track-theme</code> attribute to apply the down state version of the selected button swatch.</p>
<p>Optionally wrap the rangeslider markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form. In this example, the step attribute is omitted to allow any whole number value to be selected.</p>
<p>Optionally wrap the rangeslider markup in a container with class <code>ui-field-contain</code> to help visually group it in a longer form. In this example, the step attribute is omitted to allow any whole number value to be selected.</p>
<divclass="warning">
<p><strong>Note: </strong>The <code>data-</code> attribute <code>data-role="fieldcontain"</code> is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use the <code>ui-field-contain</code> class instead.</p>
<p>This plugin will auto initialize on any page that contains a text input with the <code>type="range"</code> attribute. However, if needed you can directly call the rangeslider plugin on any selector, just like any jQuery plugin:</p>
<p>This plugin will auto initialize on any page that contains a <code>div</code> with the <code>data-role="rangeslider"</code> attribute. However, if needed you can directly call the rangeslider plugin on any selector, just like any jQuery plugin:</p>
<desc>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as rangesliders. To change which elements are initialized, bind this option to the mobileinit event:
<desc>Sets the size of the element to a more compact, mini version. This option is also exposed as a data attribute: data-mini="true"
<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
<desc>Sets an active state fill on the track between the two rangeslider handles when set to "true".
<p>This option is also exposed as a data attribute: <code>data-highlight="false"</code>.</p>
</desc>
<typename="Boolean" />
</option>
<optionname="theme"default="null, inherited from parent"example-value='"a"'>
<desc>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 its parent container if not explicitly set.
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
<optionname="trackTheme"default="null, inherited from parent"example-value='"a"'>
<desc>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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>Optionally wrap the selects in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
<p>Optionally wrap the selects in a container with class <code>ui-field-contain</code> to help visually group it in a longer form.</p>
<divclass="warning">
<p><strong>Note:</strong> The <code>data-</code> attribute <code>data-role="fieldcontain"</code> is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Add class <code>ui-field-contain</code> instead.</p>
<p>The following example organizes the options into <code>optgroup</code> elements. Support for this feature in mobile selects is a bit spotty, but is improving.</p>
<p>Lastly, one needs to wrap the <code>fieldset</code> in a <code>div</code> with <code>data-role="controlgroup"</code> attribute, so it can be styled as a group.</p>
<p>It's common for developers to include a "null" option in their select element to force a user to choose an option. If a placeholder option is present in your markup, jQuery Mobile will hide them in the overlay menu, showing only valid choices to the user, and display the placeholder text inside the menu as a header. A placeholder option is added when the framework finds:</p>
<ul>
<li>An option with no value attribute (or an empty value attribute)</li>
<li>An option with no value attribute</li>
<li>An option with an empty value attribute (<code>value=""</code>). <pclass="warning"><strong>Note:</strong> Indicating that an option should be used as a placeholder by providing the <code>value</code> attribute and setting it to "" is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.</p></li>
<li>An option with no text node</li>
<li>An option with a <code>data-placeholder="true"</code> attribute. (This allows you to use an option that has a value and a textnode as a placeholder option).</li>
<p>Customizes the text of the close button which is helpful for translating this into different languages. The close button is displayed as an icon-only button by default so the text isn't visible on-screen, but is read by screen readers so this is an important accessibility feature.</p>
<p>This option is also exposed as a data attribute: <code>data-close-text="Fermer"</code>.</p>
<optionname="dividerTheme"default="null, inherited from parent"example-value='"b"'>
<desc>
Sets the color scheme (swatch) for the listview dividers that represent the <code>optgroup</code> headers. It accepts a single letter from a-z that maps to the swatches included in your theme.
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-divider-theme="b"</code>.</p>
Sets whether placeholder menu items are hidden. When true, the menu item used as the placeholder for the select menu widget will not appear in the list of choices.
<p>This option is also exposed as a data attribute: <code>data-hide-placeholder-menu-items="false"</code>.</p>
<desc>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as select menus. To change which elements are initialized, bind this option to the mobileinit event:
<desc>If set to true, this will make the select button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the select button is full width, regardless of the feedback content. Possible values: true, false.
<p>This option is also exposed as a data attribute: <code>data-inline="true"</code>.</p>
<desc>When set to true, clicking the custom-styled select menu will open the native select menu which is best for performance. If set to false, the custom select menu style will be used instead of the native menu.
<p>This option is also exposed as a data attribute: <code>data-native-menu="false"</code>.</p>
<desc>Sets the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, the content block colors for swatch "a" will be used for the overlays.
<p>This option is also exposed as a data attribute: <code>ui-body-d</code>.</p>
</desc>
<typename="String" />
</option>
<optionname="theme"default="null, inherited from parent"example-value='"a"'>
<desc>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 its parent container if not explicitly set.
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
<optionname="overlayTheme"default='"null, inherited from parent"'example-value='"a"'>
<desc>Sets the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, the content block colors for the overlay will be inherited from the parent of the select.
<p>This option is also exposed as a data attribute: <code>data-overlay-theme="a"</code>.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p><strong>Note:</strong> The <placeholdername="name"/> widget is deprecated as of jQuery Mobile 1.4.0.</p>
</div>
<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>
<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 <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>
<p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input without any need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the input and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them. </p>
<p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input without any need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the input.</p>
<p>In this example, the acceptable range is 0-100.</p>
<pre><code><![CDATA[
@@ -56,10 +59,13 @@
<h3>Field containers</h3>
<p>Optionally wrap the slider markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form. In this example, the step attribute is omitted to allow any whole number value to be selected.</p>
<p>Optionally wrap the slider markup in a container with class <code>ui-field-contain</code> to help visually group it in a longer form. In this example, the step attribute is omitted to allow any whole number value to be selected.</p>
<divclass="warning">
<p><strong>Note:</strong> The <code>data-</code> attribute <code>data-role="fieldcontain"</code> is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Add class <code>ui-field-contain</code> instead.</p>
<p>To set the theme swatch for the slider, add a <code>data-theme</code> attribute to the <code>input</code> which will apply the theme to both the input, handle and track. The track swatch can be set separately by adding the <code>data-track-theme</code> attribute to apply the down state version of the selected button swatch.</p>
<p>Optionally wrap the switch markup in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form. In this example, the step attribute is omitted to allow any whole number value to be selected.</p>
<p>Optionally wrap the switch markup in a container with class <code>ui-field-contain</code> to help visually group it in a longer form. In this example, the step attribute is omitted to allow any whole number value to be selected.</p>
<divclass="warning">
<p><strong>Note:</strong> The <code>data-</code> attribute <code>data-role="fieldcontain"</code> is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Add class <code>ui-field-contain</code> instead.</p>
<p>Like all form elements, this widget will automatically inherit the theme from its parent container. To choose a specific theme color swatch, specify the <code>data-theme</code> attribute on the <code>select</code> and specify a swatch letter.</p>
<p>It is also possible to theme the track of the flip switch by adding the <code>data-track-theme</code> attribute and specifying the chosen swatch letter on the <code>select</code>.</p>
<p>Here's an example of a flip switch with the swatch "a" applied to the track and swatch "c" applied to the handle:</p>
<p>Like all form elements, this widget will automatically inherit the theme from its parent container. To choose a specific theme color swatch, specify the <code>data-theme</code> attribute on the select and specify a swatch letter.</p>
<desc>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:
<desc>Sets the size of the element to a more compact, mini version. This option is also exposed as a data attribute: data-mini="true"
<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
</desc>
<typename="Boolean" />
</option>
<optionname="theme"default="null, inherited from parent"example-value='"a"'>
<desc>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 its parent container if not explicitly set.
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
<optionname="trackTheme"default="null, inherited from parent"example-value='"a"'>
<desc>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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>To make a column <em>persistent</em> so it's not available for hiding, omit the <code>data-priority</code> attribute. This will make the column visible at all widths and won't be available in the column chooser menu.</p>
<pre><code><![CDATA[
<th>I'm am critical and can't be removed</th>
<th>I'm critical and can't be removed</th>
<th data-priority="1">I'm very important</th>
<th data-priority="3">I'm somewhat</th>
<th data-priority="5">I'm less important</th>
@@ -143,6 +143,51 @@
<p>It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (<code>TH</code>), with the first row containing simple <code>colspan</code> attributes to group the columns below. In this configuration, the framework will parse the first row only for the priority and expose these heading groups as the options in the column chooser popup. In this configuration, the second heading will not be exposed as columns that can be hidden or shown independently of the groupings in the chooser. </p>
<p>The columntoggle table places an anchor before the table that invokes a popup listing the columns available for showing/hiding. The ID of the popup and thus the href of the anchor should be the ID of the table suffixed by the string <code>-popup</code>. You may separately pre-enhance the popup widget, or you may allow autoinitialization to enhance it.</p>
<p>The popup widget must contain a single controlgroup widget which in turn contains all the checkboxes representing the columns of the table.</p>
<p>In the example below the parameter <code>data-column-btn-theme="b"</code> is added to the table explicitly to indicate that the theme applied to the "Columns..." button is not the default (<code>null</code>).</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>The responsive table plugin is as minimally styled as possible to give you a clean slate for your designs. The plugin focuses primarily on the difficult scripting elements: generating the labels for the reflow table and creating the button and column chooser popup. Out of the box, the table just has a few basic style rules to add a bit of padding and set the vertical alignment of cells to be top left for visual consistency. </p>
<p>The table will adapt to whatever content block it sits on, but there isn't an explicit theming attribute for this widget. We did this because it's simple enough to add theme classes like <code>ui-body-a</code> to individual cells if a more heavily themed look is wanted.</p>
<h3>Row strokes</h3>
<p>To add horizontal lines between each row, add a custom style to your stylesheet that adds a border to the table headers and cells. In this example, RGBA is used to set a color (black) at an opacity of 5% so this will work on any background color:</p>
<h3>Row strokes and stripes</h3>
<pre><code><![CDATA[
.table-stroke thead th {
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.table-stroke tbody th,
.table-stroke tbody td {
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
]]></code></pre>
<p>This standard table stroke style can be also applied by adding <code>table-stroke</code> <code>class</code> to the <code>table</code> element. If you prefer a custom stroke style, use the example above as a starting point. Note that adding styles that set a color for the stroke will override a theme class so do not use these together.</p>
<p>The theme CSS contains a preset row strokes and alternating row stripes style which can be applied by adding <code>table-stroke</code> or <code>table-stripe</code> class to the <code>table</code> element.</p>
<strong>Note: the <code>table-stroke</code> and <code>table-stripe</code> classes are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. The demos contain an example how to apply these styles with custom CSS.</strong>
</longdesc>
<added>1.3</added>
@@ -80,16 +72,9 @@
<p>The classes option is only configurable via JavaScript because it expects an object literal value.</p></desc>
<desc>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as tables. To change which elements are initialized, bind this option to the mobileinit event:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Triggered after a sustained complete touch event.</desc>
<longdesc>
<p>The jQuery Mobile <code>taphold</code> event triggers after a sustained, complete touch event (also known as a long press).</p>
<p>The jQuery Mobile <code><placeholdername="name"/></code> event triggers after a sustained, complete touch event (also known as a long press).</p>
<p><code>$.event.special.tap.tapholdThreshold</code> (default: 750) - This value dictates how long the user must hold their tap before the taphold event is fired on the target element.</p>
<p><code>$.event.special.tap.emitTapOnTaphold</code> (default: true) - This value dictates whether a tap event will be emitted along with the <placeholdername="name"/> event.</p>