Jquery Mobile Multiview Plugin

version based on JQM 1.0.1

1. Quick Guide
   To use this plugin you will need 3 files:

   • jquery.mobile.multiview.js - plugin
   • jquery.mobile.multiview.css - css
   • jquery.mobile-1.0.1multiview - Jquery Mobile with slight modifications

2. Current Status
   I have rewritten parts of the plugin trying to get by without having to modify Jquery Mobile. Slowly progressing... With the upcoming JQM 1.1. I will need to rewrite the popover part of the plugin, because right now popovers just tap into the fixed toolbar routine, so they reposition as you scroll.
   As JQM 1.1 will switch to position fixed, I will need to redo the popover positioning.

Other than that the plugin is coming along. Panel transitions are now running without touching JQM except for adding pageContainer as changePage option, which also reduces duplicate code inside the plugin considerably. I'm still looking for a way to do the same to hashchange navigation.

3. Setup

   • start with a regular JQM page
   • add data-wrapper="true" to this page and other pages you want to run the plugin on. Multiview runs in a single instance, so if you pull in a page into the DOM labelled with data-wrapper="true" it will also be "plugged".
   • add your panels inside(!) this page.

4. Panel Layouts
   a) Plain Popovers - your page should look like this:

    header
    content 
    popover 1
      nested pages
    popover 2
      nested pages
    ... 
    footer 
   

b) Fullwidth panel (and popovers) = a true multipage - your page should look like this:

        header
    fullwidth panel
         nested pages
    popover 1
         nested pages
    popover 2
         nested pages
    ... 
    footer

c) Splitscreen menu/main (and popovers) - your page should look like this:

    header
    menu panel
        nested pages
    main panel
        nested pages
    popover 1
        nested pages
    popover 2
        nested pages
    ... 
    footer

5. Attributes:
   A run-through of all attributes, where to specify and what they do:

a) general

data-wrapper="true"	REQUIRED on div-page	put this on your wrapper page to fire the plugin
data-role="panel"	REQUIRED on div-panel	tells the plugin this ... is a panel
data-id="your_panel_name"	REQUIRED on div-panel	the name of your panel
data-panel="panel_type"	REQUIRED on div-panel	type of panel "fullwidth", "menu", "main" or "popover"
data-hash="history"	optional on div-panel	add this if you want to have a panel history (not perfect yet!)

b) on the menu

data-switchable="true"	optional on div-menu	toggle the menu in splitview mode (default false)
data-switchableHideOnLoad="true"	optional on div-menu	hide the toggle menu when the page loads (default false)
data-menu-text="text"	optional on div-menu	text for the menu button shown in popover mode, which opens/hides the menu, default "menu"
data-menu-iconpos="yourIconpos"	optional on div-menu	iconpos for the menu button shown in popover mode, default "left"
data-menu-theme="your_theme"	optional on div-menu	theme for the menu button shown in popover mode, default "a"
data-menu-icon="search"	optional on div-menu	icon for the menu button shown in popover mode, default "search"

c) on panel pages

data-show="first"

REQUIRED on div-page

tell the plugin which page to show first on a panel. Omit this if you want a blank panel

d) on popovers

data-show="once"

optional on div-popover

show this popover once the first time this page is loaded (think login popover)

e) used in methods(!)

data-panel="panel-data-id"	REQUIRED on links	sets $.mobile.pageContainer from body to panel before transitions. That's where your transition will go to
to call a transition programmatically add the respective panel as pageContainer option example: $.mobile.changePage('#pageo', {transition: 'slide', pageContainer: $('div:jqmData(id="your_panel_ID")') }); to open a popover panel, create a link with href="#", data-panel="popover" and a class of .toggle__popover example: a href="#" data-transition="pop" data-role="button" data-panel="popoverShow" class="toggle_popover"
data-context	REQUIRED on context links	add this if you want a context transition = changePage on panel A and change corresponding page on panel B
data-context-panel	REQUIRED on context links	add this to tell JQM where your context transition should go to

f) Bonus

data-type="horizontal"	optional on collapsible-set	still working on it. Add this to make change a collapsible-set into a horizontal tab viewer
.iconposSwitcher-a	optional on a-buttons changes buttons to icon-only on smartphones
.iconposSwitcher-div	optional on input-buttons	changes buttons to icon-only on smartphones

6. Please also note:

• I'm using 3 screen modes: >768 = splitview, >468 = popover, <468 = fullscreen
• in fullscreen mode, all popovers are changed to fullsize JQM pages, opening a popover in fullscreen pop-transition a regular JQM page.
• scrollview is only used for popovers in splitview and popver mode.
• the history plays nice as long as all pages are on board. Once you start to load in external pages, things still get messy.
• you will get automatic back buttons on all panels, which have data-history="hash". these work fine.
• I had deeplinking working for "onboard" pages, but something is broken with JQM 1.0.1. - still searching
• for deeplinking external pages ("offboard"), I'm thinking about a sitemap option - otherwise the plugin does which panel external.html goes to
• I'm still tinkering with another layout mode for smartphones, in which the menu is shown first and the main panel is the next page being shown.
• if you want to fill up your header with buttons7form elements etc, add .headWrapRight and .headWrapLeft to your header and drop your elements - all snuggly aligned (I recommend using iconposSwitcher-a/div on all buttons in a crammed header)
• You should be able to use a global header/footer (on wrapper), local header/footer (on nested pages) or any mix you like. Not sure if this works ok anymore though.
• Multiview should work with forms, Photoswipe, (tweaked Pagination).

That's it. Hope you enjoy the plugin.

I'm not progressing as fast as I would like (need to earn my living, too), but please go ahead and post issues. I will try to work on them whenever possible.