/
page4.html
168 lines (127 loc) · 9.1 KB
/
page4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html class="no-js multiview">
<head>
<title>multiview plugin - page 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="LOC/style/jquery.mobile.scrollview.css" />
<link rel="stylesheet" type="text/css" href="LOC/style/jquery.mobile.multiview.css" />
</head>
<body>
<!-- the wrapper page loaded through AJAX -->
<div data-role="page" id="wrap4" data-wrapper="true">
<!-- ////////////// embedded fullwidth panel /////////////// -->
<div class="ui-panel-fullwidth" data-role="panel" data-id="fullwidthPage" data-panel="fullwidth" data-hash="history">
<div data-role="page" id="fw-page1" data-show="first" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>fullwidth page1</h1>
</div>
<div data-role="content">
<h3 style="text-align: center">multiview</h3>
<br>
<p style="text-align: center">This page is a multipage inside a fullwidth panel and wrapped by a wrapper page. It contains 3 subpages</p>
<br>
<br>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3 class="col_Head blockHeading">Setup</h3>
<pre>
<!-- wrapper page -->
<div data-role="page" id="type-home">
(<!-- global header -->)
<!-- fullwidth panel -->
<div data-role="panel" data-panel="fullwidth" data-id="thisPanelsID">
<!-- regular JQM pages (nested!)>
</div>
(<!-- global footer -->)
</div>
</pre>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3 class="col_Head blockHeading">Info</h3>
<p>Don't forget to specify <code>data-target="panelID"</code> on all links inside the panel! Be careful not to target to <code>data-panel</code>, which descripes the panel type, like "popover".
Since there can be more than one popover on page, the <code>data-target</code> always needs to point to the <code>data-id</code> of the respective panel</p>
<br>
<p>One nested page needs <code>data-show="first"</code>. This page will be shown first.</p>
<br>
<p>By default JQM creates a single history entry for the whole page including all nested pages. You can specify a history for the multipage, which supercedes
JQM history by setting <code>data-hash="history"</code> on the panel - not the page! Navigate some pages,
click the browser back-button - you will now go back on the panel until the first page labelled with <code>data-show="first"</code>.
Now clicking the browser back button will take you to the previously visited webpage as the panel-history.stack = 0 and therefore the JQM history takes over.
</div>
<div data-role="collapsible" data-collapsed="true">
<h3 class="col_Head blockHeading">Navigation</h3>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a">
<li data-role="list-divider">Pages in this Panel</li>
<li><a href="#fw-page2" data-target="fullwidthPage"><h3>Fullwidth page 2</h3></a></li>
<li><a href="#fw-page3" data-target="fullwidthPage"><h3>Fullwidth page 3</h3></a></li>
<li><a href="#fw-page4" data-target="fullwidthPage"><h3>Fullwidth page 4</h3></a></li>
</ul>
</div>
</div>
</div>
</div><!-- end page -->
<div data-role="page" id="fw-page2" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Full width page2</h1>
</div>
<div data-role="content">
<p>this is fullwidth page2. Continue to the following pages</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="b">
<li data-role="list-divider">Pages in this Panel</li>
<li><a href="#fw-page1" data-target="fullwidthPage"><h3>Fullwidth page 1</h3></a></li>
<li><a href="#fw-page3" data-target="fullwidthPage"><h3>Fullwidth page 3</h3></a></li>
<li><a href="#fw-page4" data-target="fullwidthPage"><h3>Fullwidth page 4</h3></a></li>
</ul>
</div>
</div><!-- end page -->
<div data-role="page" id="fw-page3" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Full width page3</h1>
</div>
<div data-role="content">
<p>this is fullwidth page3. Continue to the following pages</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="b">
<li data-role="list-divider">Pages in this Panel</li>
<li><a href="#fw-page1" data-target="fullwidthPage"><h3>Fullwidth page 1</h3></a></li>
<li><a href="#fw-page2" data-target="fullwidthPage"><h3>Fullwidth page 2</h3></a></li>
<li><a href="#fw-page4" data-target="fullwidthPage"><h3>Fullwidth page 4</h3></a></li>
</ul>
</div>
</div><!-- end page -->
<div data-role="page" id="fw-page4" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Full width page4</h1>
</div>
<div data-role="content">
<p style="text-align: center;">this is MainPage4. Only some text here to check scrolling</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
</p>
</div>
</div><!-- end page -->
</div><!-- end panel -->
<!-- global footer across all panel pages -->
<div data-role="footer" data-id="mainFooter" data-position="fixed" class="ui-footer-global">
<div data-role="navbar" data-grid="d">
<ul>
<li><a href="page1.html" data-iconpos="top" data-icon="plus">page1</a></li>
<li><a href="page2.html" data-iconpos="top" data-icon="info">page2</a></li>
<li><a href="page3.html" data-iconpos="top" data-icon="plus">page3</a></li>
<li><a href="#" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="plus">page4</a></li>
<li><a href="page5.html" data-iconpos="top" data-icon="plus">page5</a></li>
</ul>
</div>
</div>
</div><!-- end wrapper page -->
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="LOC/scripts/jquery.mobile-1.0/jquery.mobile-1.0multiview.js"></script>
<script type="text/javascript" src="LOC/scripts/plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="LOC/scripts/plugins/jquery.mobile.scrollview.js"></script>
<script type="text/javascript" src="LOC/scripts/plugins/jquery.mobile.multiview.js"></script>
</html>