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
The children of any element can be filtered by setting the attribute <code>data-filter="true"</code> on the element. By default, the text contained in each child is used for filtering, however, you also have the option of setting the attribute <code>data-filtertext</code> to a string value on any child that will be considered for filtering to associate custom filter text instead.</p>
<h2id="filter-ul">Basic filter</h2>
<p>The filter widget is based on and replaces the listview filter extension. Thus, you can set <code>data-filter="true"</code> on a listview to generate a filter for its list items.</p>
<p>Nevertheless, the way in which a filterable is constructed differs from the way the listview filter extension worked in one important regard: the text field for entering the search string is not provided. Instead, you can provide the text field in your markup and have the filterable make use of it by providing a selector that will retrieve the text field as the value of the filterable's <code>data-input</code> attribute. Add class <code>ui-filterable</code> to the <code>form</code> in which you wrap the search input or to the listview to have the framework adjust the margin between the text field and listview.</p>
<p>The deprecated behavior whereby the filterable injects a text field before the element whose children are to be filtered is retained for version 1.4.0 to help with the transition from the listview filter extension, however, it will be removed in 1.5.0.</p>
<h2>Basic filter</h2>
<p>The filter widget is based on and replaces the listview filter extension. Thus, you can set <code>data-filter="true"</code> on a listview to generate a filter for its list items.</p>
<p>Nevertheless, the way in which a filterable is constructed differs from the way the listview filter extension worked in one important regard: the text field for entering the search string is not provided. Instead, you can provide the text field in your markup and have the filterable make use of it by providing a selector that will retrieve the text field as the value of the filterable's <code>data-input</code> attribute. Add class <code>ui-filterable</code> to the <code>form</code> in which you wrap the search input or to the listview to have the framework adjust the margin between the text field and listview.</p>
<p>The deprecated behavior whereby the filterable injects a text field before the element whose children are to be filtered is retained for version 1.4.0 to help with the transition from the listview filter extension, however, it will be removed in 1.5.0.</p>
<divdata-demo-html="true">
<formclass="ui-filterable">
@@ -47,8 +47,8 @@
</ul>
</div><!--/demo-html -->
<h2id="filter-table">Table filter</h2>
<p>
<h2>Table filter</h2>
<p>
You are not limited to using filters on listviews. To create a filter for a table widget, set
<code>data-filter="true"</code> on the table element to generate a filter for table rows.
<p>The filter widget can be used on other widgets, too. To filter a list of controlgroup buttons, declare <code>data-filter="true"</code> on the element that creates the controlgroup (Note that you can also use the <code>data-filtertext</code> attribute to declare the text string used for filtering the respective element.
<h2>Controlgroup Filter</h2>
<p>The filter widget can be used on other widgets, too. To filter a list of controlgroup buttons, declare <code>data-filter="true"</code> on the element that creates the controlgroup (Note that you can also use the <code>data-filtertext</code> attribute to declare the text string used for filtering the respective element.
</p>
<divdata-demo-html="true">
@@ -110,8 +110,8 @@
</div>
</div>
<h2id="filter-select">Filter Select</h2>
<p>The widget also works on <code>select</code> widgets by hiding options that do not match the filter text. To use a filter for <code>options</code>, declare the <code>data-filter</code> attribute on the select element.</p>
<h2>Filter Select</h2>
<p>The widget also works on <code>select</code> widgets by hiding options that do not match the filter text. To use a filter for <code>options</code>, declare the <code>data-filter</code> attribute on the select element.</p>
<divdata-demo-html="true">
<form>
@@ -131,26 +131,26 @@
</select>
</div>
<h2id="filter-random">Filter Anything</h2>
<p>The widget can be used for filtering on any element containing other elements, like a <code>div</code> containing <code>p</code> elements.
<h2>Filter Anything</h2>
<p>The widget can be used for filtering on any element containing other elements, like a <code>div</code> containing <code>p</code> elements.
<p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
<p><strong>tags</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<p><strong>Tags</strong> erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
<p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
<p><strong>Filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
<p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
<p><strong>tags</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<p><strong>Tags</strong> erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
<p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
<p><strong>Filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
</div>
</div>
<h2id="filter-styling">Filter Styling</h2>
<p>
<h2>Filter Styling</h2>
<p>
The filter widget supports the same attributes as the previous listview extension. Use <code>data-filter-theme</code> to declare a specific theme for the text field (overriding inheritance). <code>data-filter-placeholder</code> allows you to customize the input's placeholder text. In addition, the filterable widget will synchronize options shared between the textinput widget and the widget whose children it filters to make sure that the value of the textinput widget options is the same as the value of the widget options. So, for example, if you set <code>data-inset="true"</code> on the listview, then the corresponding textinput widget will also be inset.</p>
<p><strong>NOTE:</strong> This behavior is deprecated and will be removed in 1.5.0. The correct way forward is to provide the text field (or any other widget that emits the "change" signal) as part of the original markup and to pass a selector that will retrieve it to the filterable widget via the <code>data-input</code> attribute.
<p><strong>NOTE:</strong> This behavior is deprecated and will be removed in 1.5.0. The correct way forward is to provide the text field (or any other widget that emits the "change" signal) as part of the original markup and to pass a selector that will retrieve it to the filterable widget via the <code>data-input</code> attribute.
</p>
<divdata-demo-html="true">
@@ -167,8 +167,8 @@
</ul>
</div><!--/demo-html -->
<h2id="filter-reveal">Filter Reveal</h2>
<p>
<h2>Filter Reveal</h2>
<p>
The filter reveal feature makes it easy to build a simple autocomplete
with local data. When a filter has the <code>data-filter-reveal="true"
</code> attribute, it will auto-hide all the list items when the search
<p>As with the listview extension, you can provide custom callback functions to the filter or override the filter altogether on the <code>filterablebeforefilter</code> event. Please note that the filter has a <strong>delay of 250ms</strong> before the filter actually triggers. This prevents running the filtering function multiple times while the user is typing.
<h2>Filter Custom Callback</h2>
<p>As with the listview extension, you can provide custom callback functions to the filter or override the filter altogether on the <code>filterablebeforefilter</code> event. Please note that the filter has a <strong>delay of 250ms</strong> before the filter actually triggers. This prevents running the filtering function multiple times while the user is typing.
</p>
<p>To set a custom filtering function that will become the new default for all filterable widgets, override the <code>filterCallback</code> option in the filterable widget prototype in a "mobileinit" signal handler:</p>
<p>To set a custom filtering function that will become the new default for all filterable widgets, override the <code>filterCallback</code> option in the filterable widget prototype in a "mobileinit" signal handler:</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
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
<pclass="jqm-intro">All form widgets begin with native form elements with rich HTML semantics that are enhanced to make them more attractive and finger-friendly.
<p>All form widgets begin with native form elements with rich HTML semantics that are enhanced to make them more attractive and finger-friendly.
<p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them. For instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods. See options, methods, and events listed on each form plugin's documentation page for details. </p>
<p>By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them. For instance, a <code>select</code> element will be found and initialized with the "selectmenu" plugin, while an <code>input</code> element with a <code>type="checkbox"</code> will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods. See options, methods, and events listed on each form plugin's documentation page for details. </p>
<h2>Initializing groups of dynamically-injected form elements</h2>
<p>If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).</p>
<h2>Initializing groups of dynamically-injected form elements</h2>
<p>If you should generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (see below).</p>
<p>For example, if a block of HTML markup (say a login form) was loaded in through AJAX, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:</p>
<p>For example, if a block of HTML markup (say a login form) was loaded in through AJAX, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:</p>
<p>In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the <code>refresh</code> method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the <code>refresh</code> method:</p>
@@ -386,11 +385,11 @@
var myswitch = $( "#selectbar" );
myswitch[ 0 ].selectedIndex = 1;
myswitch.slider( "refresh" );
</pre></code>
</code></pre>
<h2>Preventing auto-initialization of form elements</h2>
<h2>Preventing auto-initialization of form elements</h2>
<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code> data-role="none"</code>. For example:</p>
<p>If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute <code> data-role="none"</code>. For example:</p>
<pre><code>
<label for="foo">
@@ -401,7 +400,7 @@
</select>
</code></pre>
<p>If you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>[data-role="none"]</code>). Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
<p>If you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>[data-role="none"]</code>). Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
<pre><code>
$( document ).bind( "mobileinit", function() {
@@ -413,17 +412,17 @@
<p>One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if <code>select</code> is included. If you wish to retain the native performance and appearance of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile, you can set <code>$.mobile.selectmenu.prototype.options.nativeMenu</code> to true in a <code>mobileinit</code> callback as a global setting or use <code>data-native-menu="true"</code> on a case by case basis.</p>
<h2>File Inputs + AJAX</h2>
<p>Using a multipart form with a file input is not supported by AJAX. In this case you should decorate the parent form with <code>data-ajax="false"</code> to ensure the form is submitted properly to the server.</p>
<h2>File Inputs + AJAX</h2>
<p>Using a multipart form with a file input is not supported by AJAX. In this case you should decorate the parent form with <code>data-ajax="false"</code> to ensure the form is submitted properly to the server.</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
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
<pclass="jqm-intro">The jQuery Mobile framework provides a simple way to build CSS-based columns that can also be responsive.
<p>The jQuery Mobile framework provides a simple way to build CSS-based columns that can also be responsive.
</p>
<h2>Grid basics</h2>
<h2>Grid basics</h2>
<p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. Within the grid container, child elements are assigned <code>ui-block-a/b/c/d/e</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid.</p>
<p>Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them. Within the grid container, child elements are assigned <code>ui-block-a/b/c/d/e</code> in a sequential manner which makes each "block" element float side-by-side, forming the grid.</p>
<h2>Two column grids</h2>
<h2>Two column grids</h2>
<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-a</code> to apply the background and font styling for the "a" toolbar theme swatch. For illustration purposes, an inline <code>style="height:60px"</code> attribute is also added to each grid to set each to a standard height.</p>
<p>To build a two-column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code>, and add two child containers inside it classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-a</code> to apply the background and font styling for the "a" toolbar theme swatch. For illustration purposes, an inline <code>style="height:60px"</code> attribute is also added to each grid to set each to a standard height.</p>
<divdata-demo-html="true">
<divclass="ui-grid-a">
@@ -44,7 +44,7 @@
</div><!-- /grid-a -->
</div><!--/demo-html -->
<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the container of each of the two buttons inside to stretch them each to 50% of the screen width:</p>
<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the container of each of the two buttons inside to stretch them each to 50% of the screen width:</p>
<divdata-demo-html="true">
<fieldsetclass="ui-grid-a">
@@ -54,9 +54,9 @@
</div><!--/demo-html -->
<h2>Three-column grids</h2>
<h2>Three-column grids</h2>
<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). </p>
<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). </p>
<divdata-demo-html="true">
<divclass="ui-grid-b">
@@ -66,7 +66,7 @@
</div><!-- /grid-b -->
</div><!--/demo-html -->
<p>And an example of a 3 column grid with buttons inside:</p>
<p>And an example of a 3 column grid with buttons inside:</p>
<divdata-demo-html="true">
<fieldsetclass="ui-grid-b">
@@ -79,9 +79,9 @@
<p>View more examples of <ahref="grid-buttons.php" data-ajax="false">buttons in grids</a>.</p>
<h2>Four-column grids</h2>
<h2>Four-column grids</h2>
<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. </p>
<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. </p>
<divdata-demo-html="true">
<divclass="ui-grid-c">
@@ -93,9 +93,9 @@
</div><!--/demo-html -->
<h2>Five-column grids</h2>
<h2>Five-column grids</h2>
<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fifth block. </p>
<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fifth block. </p>
<divdata-demo-html="true">
<divclass="ui-grid-d">
@@ -108,9 +108,9 @@
</div><!--/demo-html -->
<h2>Multiple row grids</h2>
<h2>Multiple row grids</h2>
<p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
<p>Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the <code>class=ui-block-a</code> is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:</p>
<divdata-demo-html="true">
<divclass="ui-grid-b">
@@ -127,9 +127,9 @@
</div><!--/demo-html -->
<h2>Grid solo class</h2>
<h2>Grid solo class</h2>
<p>The framework adds left and right margin to buttons in a grid (one exception: 100% width button elements). For a single button you can use a container with class <code>ui-grid-solo</code> and wrap the button in a div with class <code>ui-block-a</code> like the example below. This way the button will get the same margin. View more examples of <ahref="grid-buttons.php" data-ajax="false">buttons in grids</a>.</p>
<p>The framework adds left and right margin to buttons in a grid (one exception: 100% width button elements). For a single button you can use a container with class <code>ui-grid-solo</code> and wrap the button in a div with class <code>ui-block-a</code> like the example below. This way the button will get the same margin. View more examples of <ahref="grid-buttons.php" data-ajax="false">buttons in grids</a>.</p>
<divdata-demo-html="true">
<divclass="ui-grid-a">
@@ -143,11 +143,11 @@
</div><!--/demo-html -->
<h2>Responsive grids</h2>
<h2>Responsive grids</h2>
<p>It's straightforward to take the standard grids and make them responsive by stacking the grid blocks at narrow widths. Since we just want to override the floats and widths of the standard grid styles <em>below</em> a single breakpoint, use a <code>max-width</code> breakpoint to only apply the stacked styling as an override.</p>
<p>It's straightforward to take the standard grids and make them responsive by stacking the grid blocks at narrow widths. Since we just want to override the floats and widths of the standard grid styles <em>below</em> a single breakpoint, use a <code>max-width</code> breakpoint to only apply the stacked styling as an override.</p>
<p>We recommend adding a class (ex: <code>my-breakpoint</code>) to scope the styles for the media query so it can be applied selectively. From this basic start, you can customize the appearance further or even add additional breakpoints. See an example of a <ahref="grid-custom.php" data-ajax="false">custom responsive grid</a>.</p>
<p>We recommend adding a class (ex: <code>my-breakpoint</code>) to scope the styles for the media query so it can be applied selectively. From this basic start, you can customize the appearance further or even add additional breakpoints. See an example of a <ahref="grid-custom.php" data-ajax="false">custom responsive grid</a>.</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
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
<pclass="jqm-intro">A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, lists and more.
<p>A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, lists and more.
</p>
<h2>Icon set</h2>
@@ -97,18 +97,18 @@
<h2>Removing the disc and shadow</h2>
<p>There is dark semi-opaque disc behind each icon to ensure good contrast when placed on any background color. If you prefer to not have this disc, it can be removed by adding the class <code>ui-icon-nodisc</code> to the element or its container. Set <code>data-iconshadow="false"</code> to disable the icon shadow.<p>
<p>There is dark semi-opaque disc behind each icon to ensure good contrast when placed on any background color. If you prefer to not have this disc, it can be removed by adding the class <code>ui-nodisc-icon</code> to the element or its container. Set <code>data-iconshadow="false"</code> to disable the icon shadow.<p>
<p>The white vs. black icon sprite is set at the theme level but you can override which is used by adding the <code>ui-icon-alt</code> class to the element or its container. This also changes the color that is used for the discs.<p>
<p>The white vs. black icon sprite is set at the theme level but you can override which is used by adding the <code>ui-alt-icon</code> class to the element or its container. This also changes the color that is used for the discs.<p>
<divdata-demo-html="true">
<ahref="index.html" class="ui-icon-alt" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home - Black icons, no disc</a>
<ahref="index.html" class="ui-alt-icon" data-role="button" data-icon="home" data-iconpos="notext" data-inline="true">Home - Black icons, no disc</a>
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
<h2>Demo center for <spanclass="jqm-version-number"></span></h2>
<h1>Demos</h1>
<pclass="jqm-intro">jQuery Mobile is a touch-optimized HTML5 UI framework designed to make sites and apps that are accessible on all popular smartphone, tablet and desktop devices.</p>
<pclass="jqm-intro"><small>For technical info, visit the <ahref="#api-popup" data-rel="popup" data-transition="slideup" data-position-to="window">API documentation</a>.</small></p>
<p><strong>Note:</strong> Not all demos are updated yet and we are working on a new navigation menu for the demos.</p>
</div>
<p>jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.</p>
<li><ahref="intro/"><h2>Introduction</h2><p>New to jQuery Mobile? Start here.</p></a></li>
<li><ahref="examples/"><h2>Demo Showcase</h2><p>Examples of how to customize and extend jQuery Mobile.</p></a></li>
<li><ahref="faq/"><h2>Questions & Answers</h2><p>Common issues and questions, explained.</p></a></li>
<lidata-section="Widgets" data-filtertext="responsive web design rwd adaptive PE accessible mobile breakpoints media query"><ahref="intro/rwd.php"><h2>Going Responsive</h2><p>How to use RWD with jQuery Mobile</p></a></li>
<p>For technical info, visit the <ahref="http://api.jquerymobile.com" title="jQuery Mobile API documentation" target="_blank">API documentation</a>. Downloads and info about the project can be found on <ahref="http://jquerymobile.com" title="jQuery Mobile web site" target="_blank">jquerymobile.com</a>.</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
<pclass="jqm-intro">jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all popular mobile, tablet and desktop platforms.
<p>jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all popular mobile, tablet and desktop platforms.
</p>
<h2>Introduction</h2>
<h2>Introduction</h2>
<p>jQuery Mobile is a user interface framework based on jQuery that works across all popular phones, tablet, e-reader, and desktop platforms. Built with accessibility and universal access in mind, we follow progressive enhancement and <ahref="rwd.php">responsive web design (RWD)</a> principles. HTML5 Markup-driven configuration makes it easy to learn, but a powerful <ahref="http://api.jquerymobile.com/">API</a> makes it easy to deeply customize the library.</p>
<p>jQuery Mobile is a user interface framework based on jQuery that works across all popular phones, tablet, e-reader, and desktop platforms. Built with accessibility and universal access in mind, we follow progressive enhancement and <ahref="../rwd/">responsive web design (RWD)</a> principles. HTML5 Markup-driven configuration makes it easy to learn, but a powerful <ahref="http://api.jquerymobile.com/">API</a> makes it easy to deeply customize the library.</p>
<h2>Pages & Dialogs</h2>
<h2>Pages & Dialogs</h2>
<p>A <ahref="../widgets/pages/">page</a> in jQuery Mobile consists of an element with a <code> data-role="page"</code> attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>. The baseline requirement for a page is only the page wrapper to support the navigation system, the rest is optional. </p>
<p>A <ahref="../pages/">page</a> in jQuery Mobile consists of an element with a <code> data-role="page"</code> attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>. The baseline requirement for a page is only the page wrapper to support the navigation system, the rest is optional. </p>
<p>A page can be styled as a <ahref="../widgets/dialog/">dialog</a> that makes the page look like it's a modal style overlay. To give a standard page the appearance of a modal dialog, add the <strong>data-rel="dialog"</strong> attribute to the link. Transitions can also be set on dialog links.</p>
<p>A page can be styled as a <ahref="../pages-dialog/">dialog</a> that makes the page look like it's a modal style overlay. To give a standard page the appearance of a modal dialog, add the <strong>data-rel="dialog"</strong> attribute to the link. Transitions can also be set on dialog links.</p>
<h2>AJAX Navigation & Transitions</h2>
<h2>AJAX Navigation & Transitions</h2>
<p>jQuery Mobile includes an <ahref="../widgets/navigation/" data-ajax="false">AJAX navigation system</a> to support a rich set of animated page <ahref="../widgets/transitions/" data-ajax="false">transitions</a> by automatically 'hijacking' standard links and form submissions and turning them into an AJAX request. The back button is fully supported and there are features to prefetch & cache, dynamically inject, and script pages for advanced use cases.</p>
<p>jQuery Mobile includes an <ahref="../navigation/" data-ajax="false">AJAX navigation system</a> to support a rich set of animated page <ahref="../transitions/" data-ajax="false">transitions</a> by automatically 'hijacking' standard links and form submissions and turning them into an AJAX request. The back button is fully supported and there are features to prefetch & cache, dynamically inject, and script pages for advanced use cases.</p>
<p>Whenever a link is clicked or a form is submitted, that event is automatically intercepted by the AJAX nav system and is used to issue an AJAX request based on the <code>href</code> or form action instead of reloading the page. While the framework waits for the AJAX response, a loader overlay is displayed.</p>
<p>Whenever a link is clicked or a form is submitted, that event is automatically intercepted by the AJAX nav system and is used to issue an AJAX request based on the <code>href</code> or form action instead of reloading the page. While the framework waits for the AJAX response, a loader overlay is displayed.</p>
<p>When the requested page loads, jQuery Mobile parses the document for an element with the <code> data-role="page"</code> attribute and inserts that code into the DOM of the original page. Next, any widgets in the incoming page are enhanced to apply all the styles and behavior. The rest of the incoming page is discarded so any scripts, stylesheets or other information will not be included. The framework will also note the title of the incoming page to update the title when the new page is transitioned into view.</p>
<p>When the requested page loads, jQuery Mobile parses the document for an element with the <code> data-role="page"</code> attribute and inserts that code into the DOM of the original page. Next, any widgets in the incoming page are enhanced to apply all the styles and behavior. The rest of the incoming page is discarded so any scripts, stylesheets or other information will not be included. The framework will also note the title of the incoming page to update the title when the new page is transitioned into view.</p>
<p>Now that the requested page is in the DOM and enhanced, it is animated into view with a <ahref="../widgets/transitions/" data-ajax="false">transition</a>. By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
<p>Now that the requested page is in the DOM and enhanced, it is animated into view with a <ahref="../transitions/" data-ajax="false">transition</a>. By default, the framework applies a <strong>fade</strong> transition. To set a custom transition effect, add the <code>data-transition</code> attribute to the link. </p>
<h2>Content & Widgets</h2>
<h2>Content & Widgets</h2>
<p>Inside your content container, you can add any standard HTML elements - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p>
<p>Inside your content container, you can add any standard HTML elements - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p>
<p>jQuery Mobile includes a wide range of touch-friendly UI widgets: <ahref="../widgets/buttons/">buttons</a>, <ahref="../widgets/forms/">form elements</a>, <ahref="../widgets/collapsibles/">collapsibles</a>, <ahref="../widgets/accordions/">accordions</a>, <ahref="../widgets/popup/">popups</a>, <ahref="../widgets/dialog/">dialogs</a>, <ahref="../widgets/table-column-toggle/">responsive tables</a>, and much more. For best performance, use the <ahref="http://jquerymobile.com/download-builder/" rel="external">download builder</a> to pick the components you need.</p>
<p>jQuery Mobile includes a wide range of touch-friendly UI widgets: <ahref="../buttons/">buttons</a>, <ahref="../forms/">form elements</a>, <ahref="../collapsibles/">collapsibles</a>, <ahref="../accordions/">accordions</a>, <ahref="../popup/">popups</a>, <ahref="../dialog/">dialogs</a>, <ahref="../table-column-toggle/">responsive tables</a>, and much more. For best performance, use the <ahref="http://jquerymobile.com/download-builder/" rel="external">download builder</a> to pick the components you need.</p>
<h4>Buttons</h4>
<p>There are a few ways to make <ahref="../widgets/buttons/" title="buttons-types">buttons</a>, but let's turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it. You can add an <ahref="../widgets/icons/">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>
<p>There are a few ways to make <ahref="../buttons/" title="buttons-types">buttons</a>, but let's turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it. You can add an <ahref="../icons/">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>
<p>jQuery Mobile includes a diverse set of common <ahref="../widgets/listviews/" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> attribute and we add a dynamic search filter with <code>data-filter="true"</code>.</p>
<p>jQuery Mobile includes a diverse set of common <ahref="../listviews/" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> attribute and we add a dynamic search filter with <code>data-filter="true"</code>.</p>
<p>The framework contains a full set of <ahref="../widgets/forms/">form elements</a> that are automatically enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no <code>data-role</code> needed. Be sure to wrap these in a <code>form</code> element and always properly associate a <code>label</code> with every form element.</p>
<p>The framework contains a full set of <ahref="../forms/">form elements</a> that are automatically enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no <code>data-role</code> needed. Be sure to wrap these in a <code>form</code> element and always properly associate a <code>label</code> with every form element.</p>
<divdata-demo-html="true">
<form>
@@ -96,15 +96,15 @@
</div><!--/demo-html -->
<h2>Responsive Design</h2>
<h2>Responsive Design</h2>
<p>jQuery Mobile has always been designed to work within a <ahref="rwd.php">responsive web design (RWD)</a> context and our docs and forms had a few responsive elements from the very start. All the widgets are built to be 100% flexible in width to fit easily inside any responsive layout system you choose to build. </p>
<p>jQuery Mobile has always been designed to work within a <ahref="rwd.php">responsive web design (RWD)</a> context and our docs and forms had a few responsive elements from the very start. All the widgets are built to be 100% flexible in width to fit easily inside any responsive layout system you choose to build. </p>
<p>The library also includes a number of responsive widgets like <ahref="../widgets/grids/">responsive grids</a>, <ahref="../widgets/table-reflow/">reflow tables</a> and <ahref="../widgets/table-column-toggle/">column chooser tables</a>, and <ahref="../widgets/panels/">sliding panels</a>.</p>
<p>The library also includes a number of responsive widgets like <ahref="../grids/">responsive grids</a>, <ahref="../table-reflow/">reflow tables</a> and <ahref="../table-column-toggle/">column chooser tables</a>, and <ahref="../panels/">sliding panels</a>.</p>
<h2>Theming</h2>
<p>jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters from "a" to "e" in the default theme to mix and match swatches.</p>
<p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit, they default to swatch "a").</p>
<h2>Theming</h2>
<p>jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters from "a" to "e" in the default theme to mix and match swatches.</p>
<p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit, they default to swatch "a").</p>