JQM Multiview plugin
This is a short demo page outlining the main features of Multiview. The idea behind Multiview is to allow panel-based Jquery Mobile layouts and navigation. To find out more about features and possible layouts, browse the menu to the left. To dive right in, just use some of the copy&paste templates at the bottom of the menu.
To use the plugin grab the multiview.js and .css files, as well as a (still) modified version of Jquery Mobile. All files can be found in the Multiview Github repository. Eventually the plugin should work with regular JQM, too. Until then, you will have to use the version supplied on Github. If you have any questions or find any problems, please also post on Github.
If you want to skip the details, start with a regular JQM page and add data-wrapper="true" to make this a Multiview wrapper page. Inside the wrapper you can have global toolbars and panels (so remove the content section). Up to three background panels (menu, mid, main) and any number of popover panels are possible. Inside those panels, just add regular JQM pages. This should look something like this:
<!-- wrapper --> <div data-role="page" id="your_id" data-wrapper="true"> <!--- panel ---> <div data-role="panel" data-id="menu" data-panel="menu"> <!--- nested page 1 ---> <div data-role="page" id="menu_first" data-show="first"> </div> <!--- nested page 2 ---> <div data-role="page" id="menu_second"> </div> </div> <!--- panel ---> <div data-role="panel" data-id="main" data-panel="main"> <!--- nested page 1 ---> <div data-role="page" id="main_first" data-show="first"> </div> </div> </div>
Panels require three attributes. You have to set the panel-role data-role="panel", and panel-type data-panel="menu|mid|main|popover", as well as give your panel a data-id="your_panel_name" (don't mix up with #id)
Nested pages are regular JQM pages. You can start with all pages "on board" or load external pages in on demand, starting with a Multiview-Shell page. The only thing you need to do is declare data-show="first" on the page you want to display when the page initially loads. Not doing this will start with an empty (black) container.
To specify a popover, you will also have to include a button to toggle the popover. This button needs a data-panel="your_panel_name" attribute, as well as a class of toggle_popover. On clicking the button, the plugin retrieves the panel to show and toggles the popover. In fullscreen mode, popovers will behave like normal pages, so the user will see a popover on desktop and tablet and a regular page on smartphone.
To navigate between panels just add a data-panel="your_panel_name" to a link or add the pageContainer option to a programmatic changePage call (make sure this is an object like $('div:jqmData(id="your_panel_name")'). Strings will not work.
This is basic setup, which btw also enables multipages, because JQM will only handle the wrapper page, so you can put any number of nested pages into your panels. They are all deeplinkable and will be loaded together with the wrapper.
If you are curious, what else you can do with Multiview, just click through the menu on the left.