main section

Setup

  <!-- wrapper page -->
  <div data-role="page"> id="type-home">
    (<!-- global header -->)
    <!-- menu panel -->
    <div data-role="panel" data-panel="menu" data-id="thisPanelsID">

      <!-- JQM pages for menu (nested!) -->

    </div>
	<!-- main panel -->
    <div data-role="panel" data-panel="main" data-id="thisPanelsID">

      <!-- JQM pages for main (nested!) -->

    </div>
	<div data-role="panel" data-panel="popover" data-id="thisPanelsID">

      <!-- JQM pages for popovers (nested!) -->

    </div>
	<div data-role="panel" data-panel="popover" data-id="thisPanelsID">

      <!-- JQM pages for popovers (nested!) -->

    </div>
    (<!-- global footer -->)
  </div>

Info

This page is a multiview page containing 4 panels and 16 pages, which all were added to the DOM when loading the page (directly or from another JQM-page!).


The main difference between regular JQM pages and multiview JQM pages is the use of panels instead of content sections. Four panel types are possible "main", "menu", "fullwidth" and "popover" (any number). Panels are containers with nested JQM pages. The wrapper-page ensures normal JQM navigation between pages is possible with the whole multiview-page being added or removed to/from the DOM.


To setup a multiview page specify a wrapper page and optional global header/footer, then add panels containing all nested pages.


To navigate on and between panels, a data-target="panelID" is required on all panel-links. This tells JQM to use panel-navigation (inside the wrapper page) instead of regular navigation (between wrapper page and other JQM pages). 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


On each panel one nested page needs a data-show="first" attribute. This page will be shown first when the panel is shown.


By default JQM creates a single history entry for the whole page including all nested pages. You can however specify a "hash-history" for each panel, which supercedes JQM-history while the panel is visible(!). To do this, set data-hash="history" on the panel - not the page! The panel-history starts at the page labelled with data-show="first" and increase as you navigate through the panels. If you close a panel (popover), this panel's history is reset. When you click the back-button, the highest history stack-entry from all active panels will be reversed.


You can also enable a back-btn navigation by adding yyy to the respective panel. On every changePage call, the plugin will then add a back-btn to the previous page. This way there are two ways of navigating back inside a multiview page.


Click through the pages to see how it works and find out more about the plugins other features.

mainPage4

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.

Overview

Popovers can be positioned anywhere on screen, have an optional triangel and own history. Click the links to find out more.

Fullscreen Mode

Popover pages change to fullscreen mode if screen size is less than 320px or a popovers' height is larger than the screen height. In fullscreen mode popovers (and menu) sit on top of the main-panel (sort of like a dialog...).

Scrolling

On touch devices popovers and menu are scrollable using scrollview. On desktop you get normal scrollbars, in fullscreen mode, scrollview is deactivated. If you open a popover or the menu in fullscreen mode the height of the main-area behind is matched to the popover/menu height, so you think you are scrolling the popover or menu, when in fact you are scrolling the main-panel behind.

External pages

The following button loads an external page (not part of this multipage) into this popover. Use this technique to remove low-priority pages from your multipage document and only load them on user demand

Fixed Toolbars

In fullscreen mode, any header/footer of the underlying main panel are "unfixed" and fixed behavior is attached to the popover/menu header/footer. This way fixed toolbars should look normal in fullscreen mode, too.

Page loading

Besides changing pages is popovers/menu you can also load pages in any other panel. You will need to add a data-target with the ID of the destination panel to ALL links, including changing pages inside this panel.

History

By default, JQM treats all multipages as single history stack entry. You can specify an optional panel-history using data-hash="history" for every panel.


The plugin then creates entrys on those panels whenever you changePage. When you click the browser back button, the plugin checks all panels for the last entry and does a backward transition to this page. When all panel history stacks are empty, normal JQM back-button behavior is active again. So panel history always overrides JQM history.


With active panel-history, the plugin also adds back-buttons to the corresponding page by default. Turn this behavior off by assigning data-history-button="false" to the panel. Then you only have the browser-back button to navigate.

With active panel-history, the plugin also adds back-buttons to the corresponding page by default. Turn this behavior off by assigning data-history-button="false" to the panel. Then you only have the browser-back button to navigate.

With active panel-history, the plugin also adds back-buttons to the corresponding page by default. Turn this behavior off by assigning data-history-button="false" to the panel. Then you only have the browser-back button to navigate.

With active panel-history, the plugin also adds back-buttons to the corresponding page by default. Turn this behavior off by assigning data-history-button="false" to the panel. Then you only have the browser-back button to navigate.