PageRenderTime 58ms CodeModel.GetById 14ms RepoModel.GetById 1ms app.codeStats 0ms

/docs/pages/page-navmodel.html

https://github.com/inorganik/jquery-mobile
HTML | 144 lines | 93 code | 51 blank | 0 comment | 0 complexity | 23484e87afc26d9a677a1b3f0d1e6cfb MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6. 	<title>jQuery Mobile Docs - Ajax, hashes &amp; history</title>
    7. 

  7. 	<link rel="stylesheet"  href="../../themes/default/" />
    8. 

  8. 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
    9. 

  9. 	<script src="../../js/jquery.js"></script>
    10. 

  10. 	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
    11. 

  11. 	<script src="../_assets/js/jqm-docs.js"></script>
    12. 

  12. 	<script src="../../js/"></script>
    13. 

  13. </head>
    14. 

  14. <body>
    15. 

  15. 

  16. 	<div data-role="page" class="type-interior">
    17. 

  17. 

  18. 		<div data-role="header" data-theme="f">
    19. 

  19. 		<h1>Ajax, hashes &amp; history</h1>
    20. 

  20. 		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
    21. 

  21. 	</div><!-- /header -->
    22. 

  22. 

  23. 	<div data-role="content">
    24. 

  24. 		<div class="content-primary">
    25. 

  25. 			<h2>jQuery Mobile's navigation model</h2>
    26. 

    27. 

  27. 			<p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>
    28. 

  28. 

  29. 			<p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-url</code> attribute.</p>
    30. 

    31. 

  31. 			<p>When a url is initially requested, there may be one or more "pages" in the response, and only the first one will be shown. The advantage of storing more than one "page" is that it allows you to pre-fetch static pages that are likely to be visited.</p>
    32. 

  32. 

  33. 			<h2>Hash and Ajax driven page navigation</h2>
    34. 

  34. 

  35. 			<p>By default all navigation within jQuery Mobile is based on changes and updates to <code>location.hash</code>. Whenever possible, page changes will use a smooth transition between the current "page" and the next, whether it is either already present in the DOM, or is automatically loaded via Ajax.</p>
    36. 

  36. 

  37. 			<p>Hash values created by jQuery Mobile are normalized as full paths relative to the URL of the first "real" page that was loaded.	The hash is always maintained as a valid URL, so any "page" in jQuery mobile can be bookmarked or referenced in a link. To retrieve a non-hash-based URL, simply remove the # from the address and refresh the page.</p>
    38. 

  38. 

  39. 			<p>In general, hash changes are created whenever a link is clicked in jQuery mobile. When a link is clicked, jQuery mobile will make sure the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced url via Ajax instead. When the page returns successfully, it will set the location.hash to the new page's relative url. </p>
    40. 

    41. 

  41. 			<p>Hash changes that occur independently of a click, such as when a user clicks the back button, are handled through the hashchange event, which is bound to the window object using Ben Alman's hashchange special event plugin (included in jQuery Mobile). When a hash change occurs (and also when the first page loads), the hashchange event handler will send the location.hash to the <code>$.mobile.changePage()</code> function, which in turn either loads or reveals the referenced page.</p>
    42. 

    43. 

  43. 

  44. 			<p>Once the referenced page is present in the DOM, the <code>$.mobile.changePage()</code> function applies a transition between the current active page and the new page. Page transitions happen through adding and removing classes that apply CSS animations. For example, in a slide-left transition, the exiting page is given the classes "slideleft" and "out", and the entering page is given the classes <code>"slideleft"</code> and <code>"in"</code>, as well as a class of <code>"ui-page-active"</code> to mark it as the new "active" page being viewed. When the animation is complete, the <code>"in"</code> and <code>"out"</code> classes are removed, and the exited page loses its <code>"ui-page-active"</code> class.</p>
    45. 

  45. 

  46. 			<h2>replaceState plugin</h2>
    47. 

  47. 

  48. 			<p>For those browsers that support <code>history.pushState</code> and <code>history.replaceState</code> an additional optional plugin is provided that will convert the hash change urls mentioned in the previous section into the hashless equivelant. It's important to note that it does indeed convert the hash urls by using <code>history.replaceState</code> as the <code>history.pushState</code> does not produce the desired result in some mobile browsers.</p>
    49. 

    50. 

  50. 			<p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> anytime before.</p>
    51. 

  51. 

  52. 			<h2>changePage</h2>
    53. 

  53. 

  54. 			<p>Within the framework, page changes - both for pages already in the DOM and for pages that need to be loaded via Ajax - use the <code>$.mobile.changePage()</code> function. <code>$.mobile.changePage()</code> contains all of the logic for finding pages to transition to and from, and how to handle various response conditions such as a page not found. <code>$.mobile.changePage()</code> can be called externally and accepts the following arguments (to, transition, back, changeHash). The <code>to</code> argument can accept either a string (such as a file url or local element's ID), an array (in which the first array item is any local page you'd like to transition from, and the second array item is the <code>to</code> page), or an object (with expected properties: url, type ("get" or "post"), and data (for serialized parameters)), the latter of which is useful for loading pages that expect form data. The <code>transition</code> argument accepts a string representing a named transition, such as "slide". The <code>back</code> argument accepts a boolean representing whether the transition should go forward or in reverse. Lastly, the <code>changeHash</code> argument accepts a boolean for whether you'd like the url to be updated upon a successful page change.</p>
    55. 

    56. 

  56. 			<p>The <code>$.mobile.changePage()</code> function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its href attribute is normalized and then <code>$.mobile.changePage()</code> handles the rest. When forms are submitted, jQuery Mobile simply gathers a few of the form's attributes, serializes its data, and once again, <code>$.mobile.changePage()</code> is used to handle the submission and response. Also, links that create dialogs use <code>$.mobile.changePage()</code>to open a referenced page without updating the hash, which is useful for keeping dialogs out of history tracking. </p>
    57. 

    58. 

  58. 			<h2>Base element</h2>
    59. 

  59. 

  60. 			<p>Another key ingredient to jQuery Mobile's page navigation model is the <code>base</code> element, which is injected into the <code>head</code> and modified on every page change to ensure that any assets (css,images,js,etc) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the <code>base</code> element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their href and src attributes with the base path.</p>
    61. 

  61. 

  62. 

  63. 			<h2>Developer explanation of base url management:</h2>
    64. 

  64. 

  65. 			<p>jQuery Mobile manages http requests using a combination of generated absolute URL paths and manipulating a generated <code>&lt;base&gt;</code> element's href attribute. The combination of these two approaches allows us to create URLs that contain full path information for loading pages, and a base element to properly direct asset requests made by those loaded pages (such as images and stylesheets).</p>
    66. 

    67. 

  67. <p><strong>TODO: update description of internal base and urlHistory objects</strong></p>
    68. 

  68. 

  69. 

  70. 			<h2>Auto-generated pages and sub-hash urls</h2>
    71. 

  71. 

  72. 			<p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a data-url attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-url structure:
    73. 

  73. 			<code>&lt;div data-url="page.html&amp;subpageidentifier"&gt;</code></p>
    74. 

  74. 

  75. 			<p>So, for example, a page generated by the listview plugin may have an data-url attribute like this: <code>data-url="artists.html&amp;ui-page=listview-1"</code></p>
    76. 

  76. 

  77. 			<p>When a page is requested, jQuery Mobile knows to split the URL at "&amp;ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&amp;ui-page=listview-1
    78. 

  78. 			...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the div with data-url="artists.html&amp;ui-page=listview-1", which it will then display as the active page.</p>
    79. 

  79. 

  80. 			<p><em>Note that the data-url attribute of the element contains the full URL path, not just the portion after &amp;ui-page=. This allows jQuery Mobile to use a single consistent mechanism that matches URLs to page data-url attributes.</em></p>
    81. 

  81. 

  82. 			<h2>Cases when Ajax navigation will not be used</h2>
    83. 

  83. 

  84. 			<p>Under certain conditions, normal http requests will be used instead of Ajax requests. One case where this is true is when linking to pages on external websites. You can also specify that a normal http request be made through the following link attributes:</p>
    85. 

  85. 

  86. 			<ul>
    87. 

  87. 			<li><p>rel=external</p></li>
    88. 

  88. 			<li><p>target (with any value, such as "_blank")</p></li>
    89. 

  89. 

  90. 			</ul><h2>Form submissions</h2>
    91. 

  91. 

  92. 			<p>Form submissions are handled automatically through the navigation model as well. Visit the forms section for more information.</p>
    93. 

  93. 

  94. 			<h2>Known limitations</h2>
    95. 

  95. 

  96. 			<p>The non-standard environment created by jQuery Mobile's page navigation model introduces some conditions for which you should be aware when building pages:</p>
    97. 

    98. 

  98. 			<ul>
    99. 

  99. 			<li><p>When linking to directories, without a filename url, (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p></li>
    100. 

  100. 			<li><p>Documents loaded via Ajax will select the first page in the DOM of that document to be loaded as a JQM page element. As a result the developer must make sure to manage the ID attributes of the loaded page and child elements to prevent confusion when manipulating the DOM.</p></li>
    101. 

  101. 			<li><p>Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a data-role attribute of "page"). For example, links to styles and scripts that are specific to a particular page can be referenced inside that div. However, a better approach is to use jQuery Mobile's page events to trigger specific scripting when certain pages load. <strong>Note: </strong> you can return a page from the server with a data-url already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.</p></li>
    102. 

  102. 			<li><p>Conversely, any non-unique assets (those used site-wide) should be referenced in the <code>&lt;head&gt;</code> section of an HTML document, or at the very least, outside of the "page" element, to prevent running scripts more than once.</p></li>
    103. 

  103. 			<li><p>The "ui-page" key name used in sub-hash url references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.</p></li>
    104. 

  104. 			</ul>
    105. 

  105. 

  106. 

  107. 				</div><!--/content-primary -->
    108. 

  108. 

  109. 				<div class="content-secondary">
    110. 

  110. 

  111. 					<div data-role="collapsible" data-collapsed="true" data-theme="b">
    112. 

  112. 

  113. 							<h3>More in this section</h3>
    114. 

  114. 

  115. 							<ul data-role="listview" data-theme="c" data-dividertheme="d">
    116. 

  116. 

  117. 								<li data-role="list-divider">Pages &amp; Dialogs</li>
    118. 

  118. 								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
    119. 

  119. 								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
    120. 

  120. 								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
    121. 

  121. 								<li><a href="page-titles.html">Page titles</a></li>
    122. 

  122. 								<li><a href="page-links.html">Linking pages</a></li>
    123. 

  123. 								<li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
    124. 

  124. 								<li><a href="page-dialogs.html">Dialogs</a></li>
    125. 

  125. 								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
    126. 

  126. 								<li data-theme="a"><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
    127. 

  127. 								<li><a href="page-dynamic.html">Dynamically Injecting Pages</a></li>
    128. 

  128. 								<li><a href="page-scripting.html">Scripting pages</a></li>
    129. 

  129. 								<li><a href="pages-themes.html">Theming pages</a></li>
    130. 

  130. 

  131. 							</ul>
    132. 

  132. 					</div>
    133. 

  133. 				</div>
    134. 

  134. 

  135. 			</div><!-- /content -->
    136. 

  136. 

  137. 			<div data-role="footer" class="footer-docs" data-theme="c">
    138. 

  138. 					<p>&copy; 2011 The jQuery Project</p>
    139. 

  139. 			</div>
    140. 

  140. 

  141. 			</div><!-- /page -->
    142. 

  142. 

  143. 			</body>
    144. 

  144. 			</html>
    145. 

  145.