Showing with 54 additions and 54 deletions.
  1. +54 −54 docs/pages/page-anatomy.html
108 docs/pages/page-anatomy.html
View file
@@ -37,18 +37,18 @@ <h2>Mobile page structure</h2>
<strong>&lt;!DOCTYPE html&gt; </strong>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;title&gt;Page Title&lt;/title&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
...content goes here...
&lt;/body&gt;
&lt;body&gt;
...content goes here...
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

@@ -89,32 +89,32 @@ <h2>Putting it together: Basic single page template</h2>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;title&gt;Page Title&lt;/title&gt;

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div data-role=&quot;page&quot;&gt;
&lt;div data-role=&quot;page&quot;&gt;

&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Page Title&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;
&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Page Title&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;Page content goes here.&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;
&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;Page content goes here.&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;

&lt;/body&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

@@ -130,40 +130,40 @@ <h2>Multi-page template structure</h2>
<pre><code>
&lt;body&gt;

&lt;!-- Start of first page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;foo&quot;&gt;
&lt;!-- Start of first page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;foo&quot;&gt;

&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Foo&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;
&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Foo&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;I&#x27;m first in the source order so I&#x27;m shown as the page.&lt;/p&gt;
&lt;p&gt;View internal page called &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;
&lt;div data-role=&quot;content&quot;&gt;
&lt;p&gt;I&#x27;m first in the source order so I&#x27;m shown as the page.&lt;/p&gt;
&lt;p&gt;View internal page called &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;


&lt;!-- Start of second page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;bar&quot;&gt;
&lt;!-- Start of second page --&gt;
&lt;div data-role=&quot;page&quot; id=&quot;bar&quot;&gt;

&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Bar&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;
&lt;div data-role=&quot;header&quot;&gt;
&lt;h1&gt;Bar&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role=&quot;content&quot;&gt;
&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;
&lt;p&gt;&lt;a href=&quot;#foo&quot;&gt;Back to foo&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;
&lt;div data-role=&quot;content&quot;&gt;
&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;
&lt;p&gt;&lt;a href=&quot;#foo&quot;&gt;Back to foo&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;div data-role=&quot;footer&quot;&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;/body&gt;
</code></pre>