フッタの構造
フッタは data-role 属性値が footer である以外、基本的な構造はヘッダと同様です。
Footer content
デフォルトでフッタはテーマの “a” 色見本(デフォルトのものでは黒背景)が適用されます。変更は ツールバーのテーマ を参照してください。
Footer content
ページのフッタは、設定可能なオプションもヘッダと非常に似ています。主な違いはフッタの方がより柔軟な使い方を想定していることで、そのため例えばヘッダにあるような内包するリンクを自動的にボタン化して左右に配置するような機能は、ありません。フッタにはヘッダ同様のマークアップルールも持っていませんので、レイアウトグリッドなどを使って望ましいデザインを実装するようにしてください。
ボタンの追加
リンクにしろ ボタン にしろ、フッタ内部に記述したものは自動的にボタンの形状になります。スペースを節約するためにも、ボタンは自動的に インラインボタン になり、テキストとアイコンの幅だけ確保することになります。
初期状態では、ツールバーは自由に作成してもらうためにナビゲーションのための余白などを確保していません。他のウィジェット同様に適度な余白をとるには class=“ui-bar” を付与してください。
これにより、次のようなフッタが作られます。
ボタンをグループでまとめるために、リンクをラッパーで囲います。そこには data-role=“controlgroup” と data-type=“horizontal” 属性を指定してください。
次のようなボタングループが出来ます。
フォーム要素の追加
フォーム要素など、他のコンテンツもフッタに記述できます。次の例は select メニューをフッタツールバーに含ませています。
固定フッタ
フッタをグローバルナビゲーションとして使っている場合など、ページ上にフッタが固定的に表示されていて欲しい場合があるかもしれません。そんな場合は、jQuery Mobileの固定フッタを用いることが出来ます。
ページ切り替えにおいてもフッタが留まるようにするには、全ページのフッタに data-id 属性を追加し、全て同じ id を指定します。たとえば、現在と遷移先のページに data-id=“myfooter” という属性を指定したとしましょう。すると、フレームワークはフッタを同じ場所に滞在させたまま、ページ切り替えのアニメーションを行います。ただし、この機能はお互いのページでヘッダとフッタが data-position=“fixed” に指定されている場合のみ有効であることに注意してください。
[PR] jQuery Mobileリファレンスが書籍になりました
森 直彦 (著)
2012年1月20日 発売
新品 ￥2,709