mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-19 15:30:24 +00:00
92 lines
No EOL
5.5 KiB
HTML
Executable file
92 lines
No EOL
5.5 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Pages</title>
|
|
<link rel="stylesheet" media="only all" href="../../css/all" />
|
|
<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>Following HTML markup conventions is essential to this approach because markup is the primary mechanism used to configure the mobile experience in jQuery Mobile. Validate your code and always avoid the use of inline styles or inline JavaScript event handlers to ensure the best results.</p>
|
|
|
|
<h2>Mobile page structure</h2>
|
|
|
|
<p>A jQuery Mobile site starts with an HTML5 'doctype'. 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>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |