mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-24 01:40:25 +00:00
142 lines
No EOL
9.9 KiB
HTML
Executable file
142 lines
No EOL
9.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Pages</title>
|
|
<link rel="stylesheet" media="only all" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Anatomy of a Page</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content" class="ui-body">
|
|
|
|
<p>The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.</p>
|
|
|
|
<p>The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
|
|
|
|
<h2>Mobile page structure</h2>
|
|
|
|
<p>A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off:</p>
|
|
|
|
<div class="highlight">
|
|
<pre><span class="cp"><!DOCTYPE html></span>
|
|
<span class="nt"><html></span>
|
|
<span class="nt"><head></span>
|
|
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
|
<span class="nt"><title></span>Page Title<span class="nt"></title></span>
|
|
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"ui-theme.css"</span> <span class="nt">/></span>
|
|
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-min.js"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-mobile-min.js"</span><span class="nt">></script></span>
|
|
<span class="nt"></head></span>
|
|
<span class="nt"><body></span>
|
|
...
|
|
<span class="nt"></body></span>
|
|
<span class="nt"></html></span>
|
|
</pre>
|
|
</div>
|
|
|
|
<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>
|
|
...
|
|
<span class="nt"></div></span>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>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>.</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>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<h2>Complete single page template</h2>
|
|
|
|
<p>Putting it all together, this is the standard boilerplate page template you should start with:</p>
|
|
|
|
<div class="highlight">
|
|
<pre><span class="cp"><!DOCTYPE html></span>
|
|
<span class="nt"><html></span>
|
|
<span class="nt"><head></span>
|
|
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
|
|
<span class="nt"><title></span>Page Title<span class="nt"></title></span>
|
|
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"ui-theme.css"</span> <span class="nt">/></span>
|
|
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-min.js"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-mobile-min.js"</span><span class="nt">></script></span>
|
|
<span class="nt"></head></span>
|
|
<span class="nt"><body></span>
|
|
<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> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></body></span>
|
|
<span class="nt"></html></span>
|
|
</pre>
|
|
</div>
|
|
|
|
<h2>External page linking</h2>
|
|
|
|
<p>jQuery Mobile automates the process of building Ajax powered site and applications. </p>
|
|
|
|
<p>By default, when you click on link that points to an external page (ex. products.html), the framework will parse the link's <code>href</code> to formulate an Ajax request (Hijax) and displays the loading spinner.</p>
|
|
|
|
<p>If the Ajax request is successful, the new page content is added to the DOM, the <code>mobilize()</code> function runs, then the new page is animated into view with a page transition.</p>
|
|
|
|
<p>If the Ajax request fails, the framework will display a small error message overlay (styled in the "e" swatch) that disappears after a brief time so this doesn't break the navigation flow. View an <a href="notapage.html">example of the error message</a>.</p>
|
|
|
|
<h2>Local, internal linked "pages"</h2>
|
|
|
|
<p>A single HTML document can contain either a single 'page' or multiple 'pages' can be assembled and loaded together 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 points to an anchor (<code>#foo</code>), the framework will looks for a page with that ID. If it finds a page in the HTML document, it will transition the new page into view.</p>
|
|
|
|
<p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document.</p>
|
|
|
|
<pre>
|
|
<div class="highlight">
|
|
<code><span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"foo"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>
|
|
I'm the "foo" page. Since I'm the first page
|
|
in the source order, I will be displayed onLoad.
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#bar"</span><span class="nt">></span>Visit the bar "page"<span class="nt"></a></span>
|
|
<span class="nt"></div><!-- /content --></span>
|
|
<span class="nt"></div><!-- /foo page --></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"bar"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">></span>
|
|
I'm the "bar" page. I will be shown only if the
|
|
anchor link on the <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#foo"</span><span class="nt">></span>foo<span class="nt"></a></span>
|
|
page is clicked.
|
|
<span class="nt"></div></span><span class="nt"><!-- /content --></span>
|
|
<span class="nt"></div><!-- /bar page --></span>
|
|
</code>
|
|
</div>
|
|
</pre>
|
|
|
|
<p>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>PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (<code>index.html#foo</code>) on a page in jQuery Mobile, because the framework will look for a 'page' with and <code>ID</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>ID</code>.</p>
|
|
|
|
<p>Learn more about the technical details of the navigation model and <a href="docs-navmodel.html">Ajax, hashes and history</a> in jQuery mobile.</p>
|
|
|
|
|
|
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |