固定ポジションモード

固定ポジションツールバー

ここでは、jQuery Mobileにおける固定ヘッダ/フッタのデモをお見せします。ナビゲーションを固定するためによく使われる擬似スクロールを用いることなく、自然なドキュメントを記述することが可能です。スクロール後、ヘッダとフッタは画面上下に固定的に現れます。また、画面をタップすることで固定モードを解除することが出来ます。もう一度タップすれば、再び固定位置に現れます。

このような挙動をさせるには、ヘッダやフッタに data-position=“fixed” という属性を指定してやります。


        Fixed toolbars

タップによる表示切替

固定ツールバーは、スクリーンをタップすることにより表示/非表示を切り替えられます。たとえば、固定ツールバーが表示されている状態でスクリーンをタップすると、ツールバーは非表示になり画面全体をコンテンツの表示に使うことが出来ます。もう一度タップすると、ツールバーは表示されます。

このタップに因る切替機能は、次のようにして無効にすることもできます。

$.mobile.fixedToolbars.setTouchToggleEnabled(false);

ツールバー表示位置の更新

動的にマークアップが追加されたり、あるいはウィジェットがコンテンツを非表示にしたり開閉するなどの理由でページの高さが変えられた場合、ツールバーも動的に表示位置を修正しなければなりません。ツールバーに位置を自律的に修正するよう通知するには $.mobile.fixedToolbars.show() を使います。フェードインではなく即座に表示させるには、次のようにします。

$.mobile.fixedToolbars.show(true);

ツールバーの位置修正を促すには、他にも updatelayout イベントを用いる方法があります。現在のページに動的にコンテンツを追加するようなアプリケーションを構築する場合、updatelayoutイベントを手動で実行してやることによって新たなコンテンツの状態にあわせて位置が補正されます。このイベントは開閉可能ブロックやリストビューのフィルタプラグインなどで内部的に使われています。そして、この機能の優れた点は、ツールバーに限らずページレイアウトの変更を知りたいウィジェットが updatelayout イベントにより通知を受け取れる点にあります。

既知の制限事項

jQuery Mobileは、固定ヘッダ効果のために動的に位置修正するツールバーを使っています。これは、未だほんの僅かなブラウザのみが position:fixed CSSをサポートしているだけだからです。現在実装されている固定ツールバーも適切に動作しますが、そこには幾つかの技術的な制限があります。レンダリングに関わる問題のほとんどは、多くのモバイルプラットフォーム(iOSやAndroidのような)はスクロール時に画面のスナップショットを一度撮り、それをスクロール中には動かしていることに起因します。この機構はスクロールのパフォーマンスを向上させますが、スクロールが素早く行われた際に、スクリプトが固定ツールバーを隠す前にスクリーンショットが撮られてしまうことで画面上にバーが「焼き付き」、スクロール中のページに残ってしまう場合があります。可能な限りそうした状態を避けるようにしていますが、どうしても完璧にはいきません。固定ツールバーを使う場合には、こうした制限があることに注意してください。

真の固定ツールバー: touchOverflowEnabled

本当の意味での固定ツールバーを実装するには、ブラウザが position:fixed と overflow:auto を実装している必要があります。幸いなことに、今後モバイルプラットフォームではサポートが進んでいく予定です。将来的にはウェブ標準として、この機能を使うことができるでしょう。jQuery Mobileにおいては、グローバル設定として touchOverflowEnabled と呼ばれる機能がiOS5などが実装している overflow:auto を活用しています。この機能を有効にすると、フレームワークは各ページを、スクロールを内部的に持ったコンテナで囲みます。これによってツールバーはスクロール領域の外側に置かれるようになり、本当の意味で定常的に固定的な位置に配置されることになります。この機能について詳しくはtouchOverflowを見るか、あるいはデモページで機能を確認してください(現時点では、機能するのはiOS5のみです。他のブラウザでは、動的な位置修正による固定ツールバーになります)。

以下は固定ツールバーのデモを見るためにページを長くするためのものです

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.