ツールバーのタイプ

jQuery Mobileに含まれるツールバーには、大別して2種類のツールバーがあります。ヘッダとフッタです。

  • ヘッダ は、通常ページの最初の要素になります。そして一般的には、ページタイトルと、2つまでのボタンがついています。
  • フッタ は、通常ページの最後の要素になります。ヘッダよりも比較的自由に内容を記述できますが、やはり一般的にはテキストとボタンで構成されます。

ヘッダやフッタなどのツールバーに、横方向に並べたナビゲーションやタブバーを持つことは、とても一般的なです。jQuery Mobileは、項番無しリスト(ul)リンクにより作られる ナビゲーションバー ウィジェットを実装しています。

ツールバーに指定可能な属性についてはdata属性リファレンスを参照してください。

ツールバーの位置設定

ヘッダやフッタを異なった位置に表示する方法も、少しだけあります。デフォルトでは、ツールバーは “inline” でポジション指定されており、通常のHTMLドキュメントの挙動をします。これはどのデバイスでも、JavaScriptやCSSの補助なしにきちんと表示されます。

固定ポジションモード を使うと、JavaScriptでスクロールイベントを使って組まなくても、簡単に固定ツールバーを作れます。最初、ツールバーは “inline” モードと同様にいつもの位置に表示されています。しかしスクロールが行われると、フレームワークは自動的にバーを一度消して、再び画面最上部や下部に表示させます。

どのタイミングであれ、スクリーンをタップすると固定ツールバーの表示/非表示が切り替わります。ツールバーが表示されていない時にタップすれば表示され、もう一度タップすれば非表示になるという具合です。これにより、ユーザは必要に応じて画面を最大の大きさで使うことが出来ます。

このような設定をするためには、ヘッダやフッタに data-position=“fixed” という属性値を記述してやります。

フルスクリーン・ポジションモード は固定ポジションに似ていますが、異なるのは最初は非表示で、画面がクリックされた場合にだけ表示される点です。これは、写真や動画のビューワなど画面全体を使いたいコンテンツで、必要に応じて情報やナビゲーションを表示したい場合に便利です。ツールバーは、ページの上に重なるように表示されることに注意してください。これは特定の用途においては、最も良い形になるはずです。