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
<ahref="http://api.jquerymobile.com/responsive-grid/" class="jqm-api-docs-link ui-nodisc-icon ui-alt-icon" title="Visit the API Documentation" target="_blank">API Documentation <spanclass="ui-icon ui-icon-action"></span></a>
<p>It's easy to extend the basic grid styles into a custom responsive layout by using CSS media queries to adjust the layout and design across various screen width breakpoints.</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
<ahref="http://api.jquerymobile.com/icons/" class="jqm-api-docs-link ui-nodisc-icon ui-alt-icon" title="Visit the API Documentation" target="_blank">API Documentation <spanclass="ui-icon ui-icon-action"></span></a>
<p>A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, listview buttons and more. There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons.</p>
@@ -95,7 +97,7 @@
<h2>Custom Icons</h2>
<p>Icons are displayed as background image of a <code>span</code>code> element and have a background size of 18x18px. The example below shows the custom CSS that you would need to use to add your own icons.</p>
<p>Icons are displayed as background image of a <code>span</code> element and have a background size of 18x18px. The example below shows the custom CSS that you would need to use to add your own icons.</p>
<p>In case of link buttons and <code>button</code> elements there are four possible icon positions; "beginning" (left), "end" (right), "top", and "bottom". By default the icon is placed at the beginning, but this can be overridden by using the <code>data-iconpos</code> attribute.</p>
<p>The framework offers helper classes, <code>ui-widget-icon-floatbeginning</code> and <code>ui-widget-icon-floatend</code> to make icons inside block buttons float to the beginning or end.</p>
<p>Add <code>data-show-label="false"</code> if you want to create an icon-only button.</p>
@@ -208,7 +210,7 @@
</div>
</div><!--/demo-html -->
<h2>Black vs. white icon sets</h2>
<h2>Black versus white icon sets</h2>
<p>Icons are white by default but you can switch to black icons 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>
@@ -234,7 +236,7 @@
<ahref="index.php" data-role="button" data-inline="true" data-icon="ui-icon-plus" data-show-label="false" class="ui-nodisc-icon ui-alt-icon">Alt icon without 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
<p><spanclass="jqm-intro-span">jQuery Mobile</span> 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>
<p><strong>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.</strong></p>
<p>New to jQuery Mobile? Get started by reading this <ahref="intro/" data-ajax="false">introduction</a>. 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>
<p>New to jQuery Mobile? Get started by reading this <ahref="intro/" data-ajax="false">introduction</a>. 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
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
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>This demo shows the linkbar extension that adds a fixed positioned bar on the right of the screen that makes it easy to anchor down to a specific part of a listview. View the source to see how it works.</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
<p>The list items have a thumbail. In the grid layout those will get the same size as the tile. One list item doesn't hold an image to demonstrate how you can take advantage of class <code>ui-listview-item-has-thumbnail</code> to adjust the style.</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>Nested listviews were deprecated in jQuery Mobile 1.3 and were removed in 1.4. For those wishing to use the 1.3 behavior there is a plugin available at <ahref="https://github.com/arschmitz/jquery-mobile-nestedlists/">https://github.com/arschmitz/jquery-mobile-nestedlists/</a>. With this plugin you can use the same markup. All you need to do to be able to use "jQuery Mobile 1.3 style" nested listviews is drop the plugin script in after the jQuery Mobile script.</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
<ahref="http://api.jquerymobile.com/listview/" class="jqm-api-docs-link ui-nodisc-icon ui-alt-icon" title="Visit the API Documentation" target="_blank">API Documentation <spanclass="ui-icon ui-icon-action"></span></a>
<p>A listview is coded as a simple unordered list (ul) or ordered list (ol) with a <code> data-role="listview"</code> attribute and has a wide range of features.
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
<ahref="http://api.jquerymobile.com/navbar/" class="jqm-api-docs-link ui-nodisc-icon ui-alt-icon" title="Visit the API Documentation" target="_blank">API Documentation <spanclass="ui-icon ui-icon-action"></span></a>
<p>jQuery Mobile has a navbar widget that is useful for providing buttons with optional icons in a bar. The navbar can support any number of buttons resorting to multiple rows when the number of buttons exceeds the <code>maxbuttons</code> option. Alternatively, if you set the <code>morebutton</code> option you will turn the final button in the row into a popup that contains the remaining buttons</p>
@@ -105,7 +107,7 @@
<h2>Multi-row</h2>
<p>If more than the set <code>maxbutton</code> items are added, the navbar will smart wrap the items
<p>If more than the set <code>maxbutton</code> items are added, the navbar will smart wrap the items
n-across up to the value of the <code>maxbutton</code>option and then fill the remaining rows to full width:</p>
<divdata-demo-html="true">
@@ -129,8 +131,8 @@
</div><!--/demo-html -->
<h2> Show More Button </h2>
<p>If more than the set <code>maxbutton</code> items are added and the <code>morebutton</code>
option is set to <code>true</code>, the navbar will add the extra items to a popup that
<p>If more than the set <code>maxbutton</code> items are added and the <code>morebutton</code>
option is set to <code>true</code>, the navbar will add the extra items to a popup that
resides on the last button in the row of buttons</p>
<divdata-demo-html="true">
@@ -154,8 +156,8 @@
</div><!--/demo-html -->
<h2> Show More Button with icon</h2>
<p>If more than the set <code>maxbutton</code> items are added and the <code>morebutton</code>
option is set to <code>true</code>, the navbar will add the extra items to a popup that
<p>If more than the set <code>maxbutton</code> items are added and the <code>morebutton</code>
option is set to <code>true</code>, the navbar will add the extra items to a popup that
resides on the last button in the row of buttons. An icon can be added by adding the
<code>data-morebuttonicon</code> attribute and specifying an icon</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>If you wish to perform processing on the hash values as a user clicks the links to the various internal pages in your application, you can do so by handling the events <code>pagebeforechange</code> and <code>pagecontainerbeforetransition</code>.</p>
<p>If you wish to perform processing on the hash values as a user clicks the links to the various internal pages in your application, you can do so by handling the events <code>pagebeforechange</code> and <code>pagecontainerbeforetransition</code>.</p>
<h6>jQuery Mobile Version <spanclass="jqm-version"></span> Demos</h6>
<ul>
<li><ahref="http://jquerymobile.com/" title="Visit the jQuery Mobile web site">jquerymobile.com</a></li>
<li><ahref="https://github.com/jquery/jquery-mobile" title="Visit the jQuery Mobile GitHub repository">GitHub repository</a></li>
</ul>
<p>Copyright jQuery Foundation</p>
</div><!-- /footer -->
</div><!-- /page -->
<divid="demo-page" data-role="page">
<divdata-role="toolbar" data-type="header">
<ahref="#main-page" class="ui-button">Back To Demos<spanclass="ui-icon ui-icon-back"></span></a>
<h1>Demo Main Page</h1>
</div>
<divrole="main" class="ui-content">
<p>The following three buttons all take you to the same page. However, when you get there, you will notice that the title of the page is different depending on which button you have clicked.</p>
<ahref="#main-page" class="ui-button">Back To Demos <spanclass="ui-icon ui-icon-back"></span></a>
<h1>Demo Main Page</h1>
</div>
<divrole="main" class="ui-content">
<p>The following three buttons all take you to the same page. However, when you get there, you will notice that the title of the page is different depending on which button you have clicked.</p>
<ahref="#demo-page" class="ui-button">Back To Main Page<spanclass="ui-icon ui-icon-back"></span></a>
<ahref="#main-page" class="ui-button">Back To Demos<spanclass="ui-icon ui-icon-arrow-u"></span></a>
<h1id="section"></h1>
</div>
<divrole="main" class="ui-content">
<p>This is the second page in the demo. Notice that, as you navigate to this page from the main page, the title of this page changes depending on which button on the main page you clicked.</p>
<p>You can also navigate to this same page with different parameters using the links below:</p>
<ahref="#demo-page" class="ui-button">Back To Main Page <spanclass="ui-icon ui-icon-back"></span></a>
<ahref="#main-page" class="ui-button">Back To Demos <spanclass="ui-icon ui-icon-arrow-u"></span></a>
<h1id="section"></h1>
</div>
<divrole="main" class="ui-content">
<p>This is the second page in the demo. Notice that, as you navigate to this page from the main page, the title of this page changes depending on which button on the main page you clicked.</p>
<p>You can also navigate to this same page with different parameters using the links below:</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
<p>The <code>$.mobile.navigate</code> method and the <code>navigate</code> event form the foundation of jQuery Mobile's navigation infrastructure. As such, they can function outside the confines of jQuery Mobile as a clean and intuitive navigation/history API.
</p>
<p>The <code>$.mobile.navigate</code> method and the <code>navigate</code> event form the foundation of jQuery Mobile's navigation infrastructure. As such, they can function outside the confines of jQuery Mobile as a clean and intuitive navigation/history API.</p>
<h2>Introduction</h2>
<p>jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display <ahref="../pages/">pages</a> with a rich set of animated <ahref="../transitions/" data-ajax="false">transitions</a>. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.</p>
<p>One of jQuery Mobile's core features is the ability to load and view content from disparate pages into the initial document with support for standard navigation methods like anchors and the back button. To accomplish this the library has progressive support for <code>hashchange</code> and <code>popstate</code> coupled with internal history tracking which can be used à la carte.</p>
<p>An example use case would be something like Twitter's web client. The first step is to hijack link clicks on the page and use the URL that represents that UI state to track history with <code>$.mobile.navigate</code>. It's at this point that any additional information about the UI necessary for operation on return using the back button would be stored (see, <code>foo</code> property of the object argument to the navigate method).</p>
<p>An example use case would be something like Twitter's web client. The first step is to hijack link clicks on the page and use the URL that represents that UI state to track history with <code>$.mobile.navigate</code>. It's at this point that any additional information about the UI necessary for operation on return using the back button would be stored (see, <code>foo</code> property of the object argument to the navigate method).</p>
<pre>
<code>
<pre><code>
// Define a click binding for all anchors in the page
$( "a" ).on( "click", function( event ) {
@@ -55,11 +53,12 @@
// Hypothetical content alteration based on the url. E.g, make
// an Ajax request for JSON data and render a template into the page.
alterContent( $(this).attr("href") );
});</code></pre>
});
</code></pre>
<p>Next, a <code>navigate</code> event binding helps in responding to backward and forward navigation via the browsers history API. Here the <code>alterContent</code> function can address the direction in which the browser is navigating as well as any additional information stored on the data object when <code>$.mobile.navigate</code> was invoked to store the corresponding history entry.</p>
<p>Next, a <code>navigate</code> event binding helps in responding to backward and forward navigation via the browsers history API. Here the <code>alterContent</code> function can address the direction in which the browser is navigating as well as any additional information stored on the data object when <code>$.mobile.navigate</code> was invoked to store the corresponding history entry.</p>
<pre><code>
<pre><code>
// Respond to back/forward navigation
$( window ).on( "navigate", function( event, data ){
<p>jQuery Mobile provides the <code>navigate</code> event as a wrapper for both <code>hashchange</code> and <code>popstate</code>. That is, where a binding to both events would be required to support browsers with and without <code>popstate</code> only one binding to <code>navigate</code> is necessary. In this example, altering the hash will trigger the <code>popstate</code> or <code>hashchange</code> event depending on the browser, but only a single <code>navigate</code> binding is necessary. Make sure to use the back button after alterting the hash to see that the event is fired in both cases.</p>
<p><em>Note: when viewing the console output, some browsers (eg, Chrome) fire a popstate on the initial page load</em></p>
<p><em>Note: When viewing the console output, some browsers (e.g. Chrome) fire a popstate on the initial page load</em></p>
<p>jQuery Mobile provides the <code>$.mobile.navigate</code> method as a means to track history and receive additional information along with <code>navigate</code> events. In this example, when the method example link is clicked, the url will be changed twice. The first time will it will store additional aribitrary information along with the URL and hash stored by the method. The second time it will simply change the url and store the URL and hash. When the browser moves backward through history the <code>navigate</code> event is triggered as in the event example above <em>but</em> along with it comes information about the direction of history traversal, the url, the hash, and the arbitrary data stored with the first call to the navigate method.</p>
<p>jQuery Mobile provides the <code>$.mobile.navigate</code> method as a means to track history and receive additional information along with <code>navigate</code> events. In this example, when the method example link is clicked, the url will be changed twice. The first time will it will store additional aribitrary information along with the URL and hash stored by the method. The second time it will simply change the url and store the URL and hash. When the browser moves backward through history the <code>navigate</code> event is triggered as in the event example above <em>but</em> along with it comes information about the direction of history traversal, the url, the hash, and the arbitrary data stored with the first call to the navigate method.</p>
<p><em>Note: The arbitrary state properties must be chosen carefully to avoid the url, hash, and direction properties. This is a shortcoming that will be addressed in future releases.</em></p>
<p><em>Note: The arbitrary state properties must be chosen carefully to avoid the url, hash, and direction properties. This is a shortcoming that will be addressed in future releases.</em></p>
<p>See also the <ahref="http://api.jquerymobile.com/jQuery.mobile.navigate/" class="jqm-api-docs-link">API documentation</a> of the <code>$.mobile.navigate</code> method.</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