Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 890805b2d3
Fetching contributors…

Cannot retrieve contributors at this time

169 lines (127 sloc) 9.318 kb
<!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>
&lt;!-- wrapper page --&gt;
&lt;div data-role="page" id="type-home"&gt;
(&lt;!-- global header --&gt;)
&lt;!-- fullwidth panel --&gt;
&lt;div data-role="panel" data-panel="fullwidth" data-id="thisPanelsID"&gt;
&lt;!-- regular JQM pages (nested!)&gt;
&lt;/div&gt;
(&lt;!-- global footer --&gt;)
&lt;/div&gt;
</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>
Jump to Line
Something went wrong with that request. Please try again.