fullwidth page1

multiview


This page is a multipage inside a fullwidth panel and wrapped by a wrapper page. It contains 3 subpages



Setup

  <!-- 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>

Info

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.

Navigation

Full width page2

this is fullwidth page2. Continue to the following pages

Full width page3

this is fullwidth page3. Continue to the following pages

Full width page4

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.