Skip to content

Commit 778c441

Browse files
author
capz
committedFeb 18, 2013
speedtest
speedtest
1 parent 27b4999 commit 778c441

File tree

2 files changed

+86
-36
lines changed

2 files changed

+86
-36
lines changed
 

‎index.html

+2-36
Original file line numberDiff line numberDiff line change
@@ -24,40 +24,6 @@
2424

2525
<body onload="init()">
2626

27-
<!-- Start of firstasdadas page: #one -->
28-
<div data-role="page" id="one">
29-
30-
<div data-role="header">
31-
<h1>Multi-page</h1>
32-
</div><!-- /header -->
33-
34-
<div data-role="content" >
35-
<h2>One</h2>
36-
37-
<p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
38-
39-
<p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>
40-
<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>
41-
<p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>
42-
43-
<h3>Show internal pages:</h3>
44-
<p><a href="#two" data-role="button" data-transition="flip">Show page "two"</a></p>
45-
<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
46-
</div><!-- /content -->
47-
48-
<div data-role="footer" data-id="foo1" data-position="fixed">
49-
<div data-role="navbar">
50-
<ul>
51-
<li><a href="#" class="ui-btn-active ui-state-persist" data-transition="turn" data-icon="delete">Delete</a></li>
52-
<li><a href="#two" data-icon="gear" data-transition="slide">Settings</a></li>
53-
<li><a href="#two" data-icon="refresh">Reload</a></li>
54-
<li><a href="#" data-icon="back">Back</a></li>
55-
<li><a href="#" data-icon="search">Search</a></li
56-
</ul>
57-
</div><!-- /navbar -->
58-
</div><!-- /footer -->
59-
</div><!-- /page one -->
60-
6127

6228
<!-- Start of second page: #two -->
6329
<div data-role="page" id="two" > <!-- data-theme="a" -->
@@ -77,9 +43,9 @@ <h2>Two</h2>
7743
<div data-role="footer" data-position="fixed">
7844
<div data-role="navbar">
7945
<ul>
80-
<li><a href="#one" data-icon="delete" data-transition="slide">Delete</a></li>
46+
<li><a href="index2.html" data-icon="delete" data-transition="slide">Delete</a></li>
8147
<li><a data-icon="gear" class="ui-btn-active ui-state-persist">Settings</a></li>
82-
<li><a href="#one" data-direction="reverse" data-transition="turn" data-icon="refresh">Reload</a></li>
48+
<li><a href="index2.html" data-direction="reverse" data-transition="turn" data-icon="refresh">Reload</a></li>
8349
<li><a href="#" data-icon="back">Back</a></li>
8450
<li><a href="#" data-icon="search">Search</a></li
8551
</ul>

‎index2.html

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Multi-page template</title>
8+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
9+
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
10+
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
11+
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
12+
<script>
13+
function init() {
14+
document.addEventListener("deviceready", onDeviceReady, false);
15+
alert("added deviceready handler");
16+
}
17+
function onDeviceReady() {
18+
alert("test");
19+
}
20+
21+
</script>
22+
</head>
23+
24+
25+
<body onload="init()">
26+
27+
<!-- Start of firstasdadas page: #one -->
28+
<div data-role="page" id="one">
29+
30+
<div data-role="header">
31+
<h1>Multi-page</h1>
32+
</div><!-- /header -->
33+
34+
<div data-role="content" >
35+
<h2>One</h2>
36+
37+
<p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
38+
39+
<p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>
40+
<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>
41+
<p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>
42+
43+
<h3>Show internal pages:</h3>
44+
<p><a href="#two" data-role="button" data-transition="flip">Show page "two"</a></p>
45+
<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
46+
</div><!-- /content -->
47+
48+
<div data-role="footer" data-id="foo1" data-position="fixed">
49+
<div data-role="navbar">
50+
<ul>
51+
<li><a href="#" class="ui-btn-active ui-state-persist" data-transition="turn" data-icon="delete">Delete</a></li>
52+
<li><a href="index.html" data-icon="gear" data-transition="slide">Settings</a></li>
53+
<li><a href="index.html" data-icon="refresh">Reload</a></li>
54+
<li><a href="#" data-icon="back">Back</a></li>
55+
<li><a href="#" data-icon="search">Search</a></li
56+
</ul>
57+
</div><!-- /navbar -->
58+
</div><!-- /footer -->
59+
</div><!-- /page one -->
60+
61+
62+
63+
64+
65+
<!-- Start of third page: #popup -->
66+
<div data-role="page" id="popup">
67+
68+
<div data-role="header" data-theme="e">
69+
<h1>Dialog</h1>
70+
</div><!-- /header -->
71+
72+
<div data-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><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
76+
</div><!-- /content -->
77+
78+
<div data-role="footer">
79+
<h4>Page Footer</h4>
80+
</div><!-- /footer -->
81+
</div><!-- /page popup -->
82+
83+
</body>
84+
</html>

0 commit comments

Comments
 (0)