You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Updated the single and multi-page templates to use the CDN version and have better design/content. Linked to these from the index page so they are more accessible too.
<p>I'm first in the source order so I'm shown as the page.</p>
28
-
<p>View internal page called <ahref="#bar">bar</a></p>
29
-
<p>View internal page called <ahref="#baz" data-rel="dialog" data-transition="pop">baz</a> as a dialog.</p>
24
+
<divdata-role="content" id="one">
25
+
<h2>One</h2>
26
+
27
+
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
28
+
29
+
<p>This is a multi-page boilerplate template that you can copy to build you first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <ahref="page-template.html"> single page template</a> that has just one page within it.</p>
30
+
<p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
31
+
<p>You link to internal pages by referring to the ID of the page you want to show. For example, to <ahref="#two" >link</a> to the page with an ID of "two", my link would have a <code>href="#two"</code> in the code.</p>
<p><ahref="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
30
36
</div><!-- /content -->
31
37
32
-
<divdata-role="footer">
38
+
<divdata-role="footer"data-theme="d">
33
39
<h4>Page Footer</h4>
34
40
</div><!-- /footer -->
35
-
</div><!-- /page -->
41
+
</div><!-- /page one -->
36
42
37
43
38
-
<!-- Start of second page -->
39
-
<divdata-role="page" id="bar">
44
+
<!-- Start of second page: #two -->
45
+
<divdata-role="page" id="two" data-theme="a">
40
46
41
47
<divdata-role="header">
42
-
<h1>Bar</h1>
48
+
<h1>Two</h1>
43
49
</div><!-- /header -->
44
50
45
-
<divdata-role="content">
46
-
<h2>Bar</h2>
47
-
<p>I'm the bar page.</p>
48
-
<p><ahref="#foo" data-direction="reverse">Back to foo</a></p>
49
-
<p>Or view an <ahref="link-formats.html">external page</a> from here!</p>
51
+
<divdata-role="content" data-theme="a">
52
+
<h2>Two</h2>
53
+
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
54
+
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
55
+
<p><ahref="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
56
+
50
57
</div><!-- /content -->
51
58
52
59
<divdata-role="footer">
53
60
<h4>Page Footer</h4>
54
61
</div><!-- /footer -->
55
-
</div><!-- /page -->
62
+
</div><!-- /page two -->
56
63
57
64
58
-
<!-- Start of second page -->
59
-
<divdata-role="page" id="baz">
65
+
<!-- Start of third page: #popup -->
66
+
<divdata-role="page" id="popup">
60
67
61
-
<divdata-role="header">
62
-
<h1>Baz</h1>
68
+
<divdata-role="header"data-theme="e">
69
+
<h1>Dialog</h1>
63
70
</div><!-- /header -->
64
71
65
-
<divdata-role="content">
66
-
<h2>Baz</h2>
67
-
<p>I'm the baz page, viewed as a dialog.</p>
68
-
<p><ahref="#foo" data-rel="back">Back to foo</a></p>
72
+
<divdata-role="content"data-theme="d">
73
+
<h2>Popup</h2>
74
+
<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
75
+
<p><ahref="#one" data-rel="back"data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
<p>This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
24
+
<p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
25
+
<p>This template is standard HTML document with a single "page" container inside, unlike a <ahref="multipage-template.html">multi-page template</a> that has multiple pages within it. We strongly recommend builidng your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
0 commit comments