jQuery Mobile のページ・マネージャおよびヘルパー・プラグイン

古い jQuery Mobile クラス

jQuery Mobile バージョン 1.4.3 のサポートは、%ZEN.Mojo.Plugin.jQM143PageManagerOpens in a new tab および %ZEN.Mojo.Plugin.jQM143HelperOpens in a new tab プラグイン・クラスによって提供されています。使い方は、jquery.mobile-1.4.3.min.js および jquery.mobile-1.4.3.min.css が使用されている点を除き、バージョン 1.4.5 と同じです。以下の例に示す要素は、pageContents XData ブロックで使用されています。

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

jQuery Mobile バージョン 1.3.2 のサポートは、%ZEN.Mojo.Plugin.jQM132PageManagerOpens in a new tab および %ZEN.Mojo.Plugin.jQM132HelperOpens in a new tab プラグイン・クラスによって提供されています。使い方は、jquery.mobile-1.3.2.min.js および jquery.mobile-1.3.2.min.css が使用されている点を除き、バージョン 1.4.5 と同じです。以下の例に示す要素は、pageContents XData ブロックで使用されています。

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

Note:

非推奨の jQuery Mobile プラグイン

jQuery Mobile %ZEN.Mojo.Plugin.jQMPageManagerOpens in a new tab および %ZEN.Mojo.Plugin.jQMHelperOpens in a new tab プラグイン・クラスは、旧バージョンの Zen Mojo との下位互換性用に現在使用可能です。これらのクラスは jQuery Mobile バージョン 1.3.2 も使用します。使い方は、古いクラスは以下の要素を使用して登録される点を除き、現在の 1.3.2 プラグインと同じです。

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

これらの古いクラスは更新されず、今後のリリースで削除される予定です。

jQuery Mobile 動画およびテーマのサポート

pageContents XData ブロックでは、ページ・マネージャとヘルパー要素はどちらもテーマと動画に関連するオプション属性をサポートしています。以下の例では、5 つの属性すべてを使用しています。

  <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>

ページ・マネージャ要素の以下の属性を指定できます。

• jQueryTheme

  documentView の jQuery テーマを指定します。以下に例を示します。

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

  

• jQueryAnimation

  ドキュメント・スタックを変更する (新しいドキュメントをスタックにプッシュする、またはドキュメントをスタックからポップする) 場合に使用するための jQuery Mobile 動画を指定します。以下に例を示します。

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

  

ヘルパー要素の以下の属性を指定できます。

• jQueryHeaderTheme

  ヘッダとフッタの jQuery テーマを指定します。

• jQueryBarTheme

  グリッドとバーの jQuery テーマを指定します。

• jQueryCollapsibleTheme

  折りたたみ可能なセットの jQuery テーマを指定します。

同じ要素内でいずれかまたはすべてのヘルパー属性を使用できます。以下に例を示します。

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

初期設定の後に、これらの属性を変更する必要がある場合は、changeTheme() ヘルパー・プラグイン・メソッド (“カスタム jQuery Mobile ヘルパー・プラグイン・メソッド” で後述) を使用します。

jQuery Mobile ヘルパー・レイアウト・オブジェクト

以下のリストは、jQuery Mobile ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用することを意図しています。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。

jQuery Mobile ヘルパーは、HTML5 要素の拡張バージョンを提供するため、HTML5 要素を拡張する他のヘルパーと共に使用すると、プラグイン競合が生じる可能性があります (このドキュメン内の前述の “プラグイン競合の検出および解決” を参照)。

カスタム jQuery Mobile ヘルパー・プラグイン・メソッド

%ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab から継承されたメソッドに加えて、jQuery Mobile ヘルパー・プラグインは以下のメソッドを提供します。

• changeTheme()

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

  

  テーマ、ヘッダ・テーマ、およびバー・テーマが指定されると、このメソッドはこのページで使用されているテーマを更新します。以下に例を示します。

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

  

  テーマは、最初は、pageContents XData ブロック内のヘルパー要素の属性として設定されています (この章で前述の “jQuery Mobile 動画およびテーマのサポート” を参照)。

• openPanel()

    ClientMethod openPanel(id) [ Language = javascript ]
  

  

  $panel オブジェクトの ID が指定されると、このメソッドはそのパネルを表示します。以下に例を示します。

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

  

• closePanel()

    ClientMethod closePanel(id) [ Language = javascript ]
  

  

  $panel オブジェクトの ID が指定されると、このメソッドはそのパネルを閉じます。

• togglePanel()

    ClientMethod togglePanel(id) [ Language = javascript ]
  

  

  $panel オブジェクトの ID が指定されると、このメソッドはそのパネルの開閉を切り替えます。

• showPopup()

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

  

  $popup オブジェクトのキーが指定されると、このメソッドはそのオブジェクトを表示します。options 引数は、ポップアップの任意のオプションを含むオブジェクトです。以下に例を示します。

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

  

• closePopup()

    ClientMethod closePopup(key) [ Language = javascript ]
  

  

  $popup オブジェクトのキーが指定されると、このメソッドはそのオブジェクトを閉じます。