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.
Navigation
- 4 panels and 16 nested pages in here
MainPage 3
MainPage 4
MainPage 5