mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-26 00:54:43 +00:00
Merge branch 'master' of https://github.com/jquery/jquery-mobile
This commit is contained in:
jblas@adobe.com
commit
cb820f6e5d
14 changed files with 52 additions and 24 deletions
|
|
@ -60,7 +60,7 @@
|
|||
<p>Inside the <code><body></code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute:</p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre><span class="nt"><div</span> <span class="na"> data-role=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
<pre><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<p>I'm the second in the source order so I'm hidden when the page load. I'm just shown, if a link that reference my ID is beeing clicked.</p>
|
||||
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>
|
||||
<p><a href="#foo">Back to foo</a></p>
|
||||
</div><!-- /content -->
|
||||
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
<h2>Conventions, not requirements</h2>
|
||||
|
||||
<p>Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper used to be required for auto-initialization to work but this too is now optional for single page documents so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted but the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple. </p>
|
||||
<p>Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper that used to be required for auto-initialization to work is now optional for single page documents, so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted and the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple. </p>
|
||||
|
||||
<p>Note that in a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
|
||||
|
||||
<h3>Setting the close button text</h3>
|
||||
<p>Just like the page plugin, you can set a dialog's close button text through option or data attribute. The option can be configured for all dialogs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.dialog.prototype.options.closeBtnText</code> property to a string of your choosing, or you can place the data attribute <code>data-close-btn-text</code> to configure the text from your markup.</p>
|
||||
<p>Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the <code>mobileinit</code> event and setting the <code>$.mobile.dialog.prototype.options.closeBtnText</code> property to a string of your choosing, or you can place the data attribute <code>data-close-btn-text</code> to configure the text from your markup.</p>
|
||||
|
||||
<h2>History & Back button behavior</h2>
|
||||
<p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>
|
||||
|
|
@ -63,11 +63,11 @@
|
|||
<p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p>
|
||||
<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
|
||||
|
||||
<p>Dialogs appear float above an overlay layer. This overlay adopts the swatch A content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:</p>
|
||||
<p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch A content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch e:</p>
|
||||
<a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>
|
||||
|
||||
|
||||
<p>And dialogs can be can used more like a control sheet to offer multiple buttons by removing the header:</p>
|
||||
<p>Dialogs can also be used more like a control sheet to offer multiple buttons by removing the header:</p>
|
||||
<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
|
||||
|
||||
<h2>Dialog width and margins</h2>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
<h2>Linking without Ajax</h2>
|
||||
|
||||
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links and will cause a full page refresh with no animated transition. Both attributes have the same effect, but different semantic meaning: <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.</p>
|
||||
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (<code>rel="external"</code> and <code>data-ajax="false"</code>) have the same effect, but a different semantic meaning: <code>rel="external"</code> should be used when linking to another site or domain, while <code>data-ajax="false"</code> is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.</p>
|
||||
|
||||
<p>Note: When building a jQuery Mobile application where the Ajax navigation system is disabled globally or frequently disabled on individual links, we recommend disabling the <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to avoid inconsistent navigation behavior in some browsers.</p>
|
||||
|
||||
|
|
@ -47,11 +47,11 @@
|
|||
|
||||
<h2>Linking within a multi-page document</h2>
|
||||
|
||||
<p>A single HTML document can contain or multiple 'page' containers simply be stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
|
||||
<p>A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
|
||||
|
||||
<p>If a link in a multi-page document points to an anchor (<code>#foo</code>), the framework will looks for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
|
||||
<p>If a link in a multi-page document points to an anchor (<code>#foo</code>), the framework will look for a page wrapper with that ID (<code>id="foo"</code>). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
|
||||
|
||||
<p>It's important to note if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.</p>
|
||||
<p>It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (<code>#</code>) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.</p>
|
||||
|
||||
<p>For example, a link to a page containing multiple internal pages would look like this:</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<h2>pushState plugin</h2>
|
||||
|
||||
<p>There is an optional feature is converts the longer, hash-based URLs mentioned in the previous section into the full document path which is cleaner and makes the Ajax tracking transparent in the URL structure. This is built as an enhancement on top of the hash-based URL system for Ajax links. Note that despite the name, this feature technically converts hash-based urls by using <code>history.replaceState</code> (not <code>history.pushState</code>) in the current release because this works more reliably across our target platforms. For browsers that do not support <code>history.replaceState</code>, or if this feature is disabled, hash-based URLs will be used instead. </p>
|
||||
<p>There is an optional feature that converts the longer, hash-based URLs mentioned in the previous section into the full document path which is cleaner and makes the Ajax tracking transparent in the URL structure. This is built as an enhancement on top of the hash-based URL system for Ajax links. Note that despite the name, this feature technically converts hash-based urls by using <code>history.replaceState</code> (not <code>history.pushState</code>) in the current release because this works more reliably across our target platforms. For browsers that do not support <code>history.replaceState</code>, or if this feature is disabled, hash-based URLs will be used instead. </p>
|
||||
|
||||
<p>Since the plugin initializes when the DOM is fully loaded you can enable and disable it manually by setting <code>$.mobile.pushStateEnabled</code> global <a href="../api/globalconfig.html">configuration option</a> to <code>false</code> anytime before document ready.</p>
|
||||
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
|
||||
</ul><h2>Form submissions</h2>
|
||||
|
||||
<p>Form submissions are handled automatically through the navigation model as well. Visit the forms section for more information.</p>
|
||||
<p>Form submissions are handled automatically through the navigation model as well. Visit the <a href="../forms/forms-sample.html">forms section</a> for more information.</p>
|
||||
|
||||
<h2>Using the Application Cache</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<h2>Titles in multi-page templates</h2>
|
||||
|
||||
<p>On multi-page documents, we follow a similiar convention, but since all the page share a common <code>title</code>, we have a <code>data-title</code> attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the <code>data-title</code> of the page currently in view.</p>
|
||||
<p>On multi-page documents, we follow a similiar convention, but since all the pages share a common <code>title</code>, we have a <code>data-title</code> attribute that can be added to each page container within a multi-page template to manually define a title. The title of the HTML document will be automatically updated to match the <code>data-title</code> of the page currently in view.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="page" id="foo" <strong>data-title="Page Foo"</strong>>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
</div>
|
||||
|
||||
<h3>Footers</h3>
|
||||
<p>These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup contentions as headers with button slots so use layout <a href="../content/content-grids.html">grids</a> or custom styles to achieve the design you want.</p>
|
||||
<p>These are examples of a footer with link buttons inside. Note that footers do not have the same prescriptive markup contentions as headers with button slots so use <a href="../content/content-grids.html">layout grids</a> or custom styles to achieve the design you want.</p>
|
||||
|
||||
|
||||
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
<li><a href="docs-navbar.html">Navbars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
|
||||
<li data-theme="a"><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<li><a href="docs-navbar.html">Navbars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
|
||||
<li><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. <strong>Note:</strong> If you'd like an active button in your navbar to remain active when you return to it again, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code></p>
|
||||
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remains fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. <strong>Note:</strong> If you'd like an active button in your navbar to remain active when you return to the page displaying this active button, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code> to the corresponding anchor.</p>
|
||||
|
||||
|
||||
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<li><a href="docs-navbar.html">Navbars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li data-theme="a"><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
<li data-theme="a"><a href="footer-persist-a.html">Persistent footer navbar</a></li>
|
||||
<li><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
<li><a href="docs-navbar.html">Navbars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li data-theme="a"><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
<li data-theme="a"><a href="footer-persist-a.html">Persistent footer navbar</a></li>
|
||||
<li><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
<li><a href="docs-navbar.html">Navbars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li data-theme="a"><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
<li data-theme="a"><a href="footer-persist-a.html">Persistent footer navbar</a></li>
|
||||
<li><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<li><a href="docs-navbar.html">Navbars</a></li>
|
||||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
|
||||
<li><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
<!--<li><a href="api-bars.html">API documentation</a></li>-->
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1130,6 +1130,9 @@
|
|||
if( !!newPageTitle && pageTitle == document.title ) {
|
||||
pageTitle = newPageTitle;
|
||||
}
|
||||
if ( !toPage.jqmData( "title" ) ) {
|
||||
toPage.jqmData( "title", pageTitle );
|
||||
}
|
||||
|
||||
// Make sure we have a transition defined.
|
||||
settings.transition = settings.transition
|
||||
|
|
|
|||
|
|
@ -520,6 +520,30 @@
|
|||
]);
|
||||
});
|
||||
|
||||
asyncTest( "Page title updates properly when clicking a link back to first page", function(){
|
||||
var title = document.title;
|
||||
|
||||
$.testHelper.pageSequence([
|
||||
function(){
|
||||
$.testHelper.openPage("#ajax-title-page");
|
||||
},
|
||||
|
||||
function(){
|
||||
$("#titletest1").click();
|
||||
},
|
||||
|
||||
function(){
|
||||
same(document.title, "Title Tag");
|
||||
$.mobile.activePage.find("#title-check-link").click();
|
||||
},
|
||||
|
||||
function(){
|
||||
same(document.title, title);
|
||||
start();
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
asyncTest( "Page title updates properly from title tag when loading an external page", function(){
|
||||
$.testHelper.pageSequence([
|
||||
function(){
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div data-nstest-role="page"></div>
|
||||
|
||||
<div data-nstest-role="page">
|
||||
<a href="./" id="title-check-link">back to the parent page</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue