JQM multi-panel layouts
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 82 commits behind frequent:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
multiview JQM 1.0.1


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.

  1. 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.
  2. Panel Layouts
    a) Plain Popovers - your page should look like this:

     popover 1
       nested pages
     popover 2
       nested pages

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

    fullwidth panel
         nested pages
    popover 1
         nested pages
    popover 2
         nested pages

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

    menu panel
        nested pages
    main panel
        nested pages
    popover 1
        nested pages
    popover 2
        nested pages
  1. Attributes:
    A run-through of all attributes, where to specify and what they do:

a) general

data-wrapper="true"REQUIRED on div-pageput 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
  1. 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.