Page Manager and Helper Plugins for jQuery Mobile

Older jQuery Mobile Classes

Support for jQuery Mobile version 1.4.3 is provided by the %ZEN.Mojo.Plugin.jQM143PageManagerOpens in a new tab and %ZEN.Mojo.Plugin.jQM143HelperOpens in a new tab plugin classes . Usage is identical to version 1.4.5 except that jquery.mobile-1.4.3.min.js and jquery.mobile-1.4.3.min.css are used, and the elements shown in the following example are used in the pageContents XData block:

  <mojo:jQM-1.4.3-PageManager>
    <mojo:jQM-1.4.3-Helper/>
    <mojo:mojoDefaultHelper/>
  </mojo:jQM-1.4.3-PageManager>

Support for jQuery Mobile version 1.3.2 is provided by the %ZEN.Mojo.Plugin.jQM132PageManagerOpens in a new tab and %ZEN.Mojo.Plugin.jQM132HelperOpens in a new tab plugin classes. Usage is identical to version 1.4.5 except that jquery.mobile-1.3.2.min.js and jquery.mobile-1.3.2.min.css are used, and the elements shown in the following example are used in the pageContents XData block:

  <mojo:jQM-1.3.2-PageManager>
    <mojo:jQM-1.3.2-Helper/>
    <mojo:mojoDefaultHelper/>
  </mojo:jQM-1.3.2-PageManager>

Note:

Deprecated jQuery Mobile Plugins

The jQuery Mobile %ZEN.Mojo.Plugin.jQMPageManagerOpens in a new tab and %ZEN.Mojo.Plugin.jQMHelperOpens in a new tab plugin classes are currently available for backward compatibility with earlier versions of Zen Mojo. These classes also use jQuery Mobile version 1.3.2, and usage is identical to the current 1.3.2 plugins except that the older classes are registered using the following elements:

  <mojo:jQMPageManager>
    <mojo:jQMHelper/>
    <mojo:mojoDefaultHelper/>
  </mojo:jQMPageManager>

These older classes are not being updated and will be removed in a later release.

Support for jQuery Mobile Animation and Themes

In the pageContents XData block, both page manager and helper elements support optional attributes related to themes and animation. The following example uses all five attributes:

  <mojo:jQM-1.4.5-PageManager jQueryTheme="a" jQueryAnimation="flip">
    <mojo:jQM-1.4.5-Helper jQueryHeaderTheme="a" jQueryBarTheme="d" jQueryCollapsibleTheme="c"/>
  </mojo:jQM-1.4.5-PageManager>

You can specify the following attributes for the page manager element:

• jQueryTheme

  Specifies the jQuery theme for the documentView. For example:

    <mojo:jQM-1.4.5-PageManager jQueryTheme="a">
  

  

• jQueryAnimation

  Specifies the jQuery Mobile animation to use when modifying the document stack (pushing new documents onto the stack or popping documents off the stack). For example:

    <mojo:jQM-1.4.5-PageManager jQueryAnimation="flip">
  

  

You can specify the following attributes of for the helper element:

• jQueryHeaderTheme

  Specifies the jQuery theme for the header and footer.

• jQueryBarTheme

  Specifies the jQuery theme for grids and bars.

• jQueryCollapsibleTheme

  Specifies the jQuery theme for collapsible sets.

Any or all of the helper attributes can be used in the same element. For example:

    <mojo:jQM-1.4.5-Helper jQueryHeaderTheme="a" jQueryBarTheme="d" jQueryCollapsibleTheme="c"/>

If you need to change these attributes after initial setup, use the changeTheme() helper plugin method (described later in “Custom jQuery Mobile Helper Plugin Methods”).

jQuery Mobile Helper Layout Objects

The following list is intended as a quick reference to the layout options offered by the jQuery Mobile helper plugin. For complete reference information, use the Plugin Documentation app (see “Using the Plugin Documentation and Widget Reference Apps”):

Since the jQuery Mobile helper provides extended versions of HTML5 elements, plugin conflicts are likely when it is used with other helpers that extend HTML5 elements (see “Detecting and Resolving Plugin Conflicts” earlier in this book).

Custom jQuery Mobile Helper Plugin Methods

In addition to methods inherited from %ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab, the jQuery Mobile helper plugin provides the following methods:

• changeTheme()

    ClientMethod changeTheme(newTheme = "c", headerTheme = "a", barTheme = "a")
    [ Language = javascript ]
  

  

  Given a theme, a header theme, and a bar theme, this method updates the themes used in this page. For example:

    var mainView = zen('mainView');
    mainView.getPluginByName('jQM-1.4.5-Helper').changeTheme('d','b','b');
  
  

  

  The themes are originally set as attributes of the helper element in the pageContents XData block (see “Support for jQuery Mobile Animation and Themes” earlier in this chapter).

• openPanel()

    ClientMethod openPanel(id) [ Language = javascript ]
  

  

  Given the id of a $panel object, this method displays that panel. For example:

    var mainView = zen('mainView');
    getPluginByLayoutObjectType($panel).openPanel('leftPanel'); 
  

  

• closePanel()

    ClientMethod closePanel(id) [ Language = javascript ]
  

  

  Given the id of a $panel object, this method closes that panel.

• togglePanel()

    ClientMethod togglePanel(id) [ Language = javascript ]
  

  

  Given the id of a $panel object, this method toggles the panel open or closed.

• showPopup()

    ClientMethod showPopup(key, options) [ Language = javascript ]
  

  

  Given the key of a $popup object, this method displays that object. The options argument is an object that contains any options for the popup. For example:

    var view = zen('mainView');
    view.getPluginByLayoutObjectType($popup').showPopup('form-popup',{x:150,y:200});
  

  

• closePopup()

    ClientMethod closePopup(key) [ Language = javascript ]
  

  

  Given the key of a $popup object, this method closes that object.