libs/js/jquery-mobile-1.0.1pre/docs/pages/page-anatomy.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Anatomy of a Page</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9         <script src="../../js/jquery.js"></script>
  10         <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
  11         <script src="../_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13 </head>
  14 <body>
  15
  16         <div data-role="page" class="type-interior">
  17
  18                 <div data-role="header" data-theme="f">
  19                 <h1>Anatomy of a Page</h1>
  20                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  21         </div><!-- /header -->
  22
  23         <div data-role="content">
  24                 <div class="content-primary">
  25                         <p>The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.</p>
  26
  27                         <p>The goal of this model is to allow developers to create websites using best practices &mdash; where ordinary links will "just work" without any special configuration &mdash; while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
  28
  29                         <h2>Mobile page structure</h2>
  30
  31                         <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. We recommend linking to the files hosted on the jQuery CDN for best performance:</p>
  32
  33 <pre><code>
  34 &lt;!DOCTYPE html&gt;
  35 &lt;html&gt;
  36         &lt;head&gt;
  37         &lt;title&gt;Page Title&lt;/title&gt;
  38
  39         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  40
  41         &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css&quot; /&gt;
  42         &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;
  43         &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js&quot;&gt;&lt;/script&gt;
  44 &lt;/head&gt;
  45
  46 &lt;body&gt;
  47 ...content goes here...
  48 &lt;/body&gt;
  49 &lt;/html&gt;
  50 </code></pre>
  51
  52                         <h2>Viewport meta tag</h2>
  53                         <p>Note above that there is a meta <code>viewport</code> tag in the <code>head</code> to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with exisitng desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to <code>content=&quot;width=device-width, initial-scale=1&quot;</code>, the width will be set to the pixel width of the device screen. </p>
  54
  55                         <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; </code></pre>
  56
  57                         <p>These settings do not disable the user's ability to zoom the pages, which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed a a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library. </p>
  58
  59                         <h2>Inside the body: Pages</h2>
  60                         <p>Inside the <code>&lt;body&gt;</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. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to pages.</p>
  61
  62 <div class="highlight">
  63 <pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span>
  64         ...
  65 <span class="nt">&lt;/div&gt;</span>
  66 </pre>
  67 </div>
  68
  69                         <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>
  70
  71 <div class="highlight">
  72 <pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span>
  73         <span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  74         <span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  75         <span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  76 <span class="nt">&lt;/div&gt;</span>
  77 </pre>
  78 </div>
  79
  80
  81 <h2>Putting it together: Basic single page template</h2>
  82
  83 <p>Putting it all together, this is the standard boilerplate page template you should start with on a project: </p>
  84
  85 <pre><code>
  86 &lt;!DOCTYPE html&gt;
  87 &lt;html&gt;
  88         &lt;head&gt;
  89         &lt;title&gt;Page Title&lt;/title&gt;
  90
  91         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  92
  93         &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css&quot; /&gt;
  94         &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;
  95         &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js&quot;&gt;&lt;/script&gt;
  96 &lt;/head&gt;
  97 &lt;body&gt;
  98
  99 &lt;div data-role=&quot;page&quot;&gt;
 100
 101         &lt;div data-role=&quot;header&quot;&gt;
 102                 &lt;h1&gt;Page Title&lt;/h1&gt;
 103         &lt;/div&gt;&lt;!-- /header --&gt;
 104
 105         &lt;div data-role=&quot;content&quot;&gt;
 106                 &lt;p&gt;Page content goes here.&lt;/p&gt;
 107         &lt;/div&gt;&lt;!-- /content --&gt;
 108
 109         &lt;div data-role=&quot;footer&quot;&gt;
 110                 &lt;h4&gt;Page Footer&lt;/h4&gt;
 111         &lt;/div&gt;&lt;!-- /footer --&gt;
 112 &lt;/div&gt;&lt;!-- /page --&gt;
 113
 114 &lt;/body&gt;
 115 &lt;/html&gt;
 116 </code></pre>
 117
 118                         <a href="page-template.html" data-inline="true" data-theme="b" data-role="button">View boilerplate template</a>
 119
 120
 121                 <h2>Multi-page template structure</h2>
 122
 123                         <p>A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a <code> data-role</code> of <code>"page"</code>. Each 'page' block needs a unique ID (<code>id="foo"</code>) that will be used to link internally between 'pages' (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.</p>
 124
 125                         <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. Here is what two pages look inside the <code>body</code> element.</p>
 126
 127 <pre><code>
 128 &lt;body&gt;
 129
 130 &lt;!-- Start of first page --&gt;
 131 &lt;div data-role=&quot;page&quot; id=&quot;foo&quot;&gt;
 132
 133         &lt;div data-role=&quot;header&quot;&gt;
 134                 &lt;h1&gt;Foo&lt;/h1&gt;
 135         &lt;/div&gt;&lt;!-- /header --&gt;
 136
 137         &lt;div data-role=&quot;content&quot;&gt;
 138                 &lt;p&gt;I&#x27;m first in the source order so I&#x27;m shown as the page.&lt;/p&gt;
 139                 &lt;p&gt;View internal page called &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/p&gt;
 140         &lt;/div&gt;&lt;!-- /content --&gt;
 141
 142         &lt;div data-role=&quot;footer&quot;&gt;
 143                 &lt;h4&gt;Page Footer&lt;/h4&gt;
 144         &lt;/div&gt;&lt;!-- /footer --&gt;
 145 &lt;/div&gt;&lt;!-- /page --&gt;
 146
 147
 148 &lt;!-- Start of second page --&gt;
 149 &lt;div data-role=&quot;page&quot; id=&quot;bar&quot;&gt;
 150
 151         &lt;div data-role=&quot;header&quot;&gt;
 152                 &lt;h1&gt;Bar&lt;/h1&gt;
 153         &lt;/div&gt;&lt;!-- /header --&gt;
 154
 155         &lt;div data-role=&quot;content&quot;&gt;
 156                 &lt;p&gt;I&#x27;m the second in the source order so I&#x27;m hidden when the page loads. I&#x27;m just shown if a link that references my ID is beeing clicked.&lt;/p&gt;
 157                 &lt;p&gt;&lt;a href=&quot;#foo&quot;&gt;Back to foo&lt;/a&gt;&lt;/p&gt;
 158         &lt;/div&gt;&lt;!-- /content --&gt;
 159
 160         &lt;div data-role=&quot;footer&quot;&gt;
 161                 &lt;h4&gt;Page Footer&lt;/h4&gt;
 162         &lt;/div&gt;&lt;!-- /footer --&gt;
 163 &lt;/div&gt;&lt;!-- /page --&gt;
 164 &lt;/body&gt;
 165 </code></pre>
 166
 167                 <a href="../../docs/pages/multipage-template.html" data-inline="true" data-theme="b" data-role="button" rel="external">View multi-page template</a>
 168
 169                 <p> </p>
 170
 171                 <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 an <code>ID</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>ID</code>.</p>
 172
 173
 174 <h2>Conventions, not requirements</h2>
 175
 176 <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>
 177
 178 <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>
 179
 180
 181
 182
 183                                 </div><!--/content-primary -->
 184
 185                                 <div class="content-secondary">
 186
 187                                         <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 188
 189                                                         <h3>More in this section</h3>
 190
 191                                                         <ul data-role="listview" data-theme="c" data-dividertheme="d">
 192
 193                                                                 <li data-role="list-divider">Pages &amp; Dialogs</li>
 194                                                                 <li data-theme="a"><a href="page-anatomy.html">Anatomy of a page</a></li>
 195                                                                 <li><a href="page-template.html" data-ajax="false">Single page template</a></li>
 196                                                                 <li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
 197                                                                 <li><a href="page-titles.html">Page titles</a></li>
 198                                                                 <li><a href="page-links.html">Linking pages</a></li>
 199                                                                 <li><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
 200                                                                 <li><a href="page-dialogs.html">Dialogs</a></li>
 201                                                                 <li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
 202                                                                 <li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
 203                                                                 <li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
 204                                                                 <li><a href="page-scripting.html">Scripting pages</a></li>
 205                                                                 <li><a href="phonegap.html">PhoneGap apps</a></li>
 206                                                                 <li><a href="touchoverflow.html">touchOverflow feature</a></li>
 207                                                                 <li><a href="pages-themes.html">Theming pages</a></li>
 208
 209                                                         </ul>
 210                                         </div>
 211                                 </div>
 212
 213                         </div><!-- /content -->
 214
 215                         <div data-role="footer" class="footer-docs" data-theme="c">
 216                                         <p>&copy; 2011 The jQuery Project</p>
 217                         </div>
 218
 219                         </div><!-- /page -->
 220
 221                         </body>
 222                         </html>