This page is a multipage inside a fullwidth panel and wrapped by a wrapper page. It contains 3 subpages
<!-- 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>
Don't forget to specify data-target="panelID"
on all links inside the panel! Be careful not to target to data-panel
, which descripes the panel type, like "popover".
Since there can be more than one popover on page, the data-target
always needs to point to the data-id
of the respective panel
One nested page needs data-show="first"
. This page will be shown first.
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 data-hash="history"
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 data-show="first"
.
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.
this is fullwidth page2. Continue to the following pages
this is fullwidth page3. Continue to the following pages
this is MainPage4. Only some text here to check scrolling
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.