フッタ

フッタの構造

フッタは data-role 属性値が footer である以外、基本的な構造はヘッダと同様です。

 
        
Footer content
 
 

デフォルトでフッタはテーマの “a” 色見本(デフォルトのものでは黒背景)が適用されます。変更は ツールバーのテーマ を参照してください。

ページのフッタは、設定可能なオプションもヘッダと非常に似ています。主な違いはフッタの方がより柔軟な使い方を想定していることで、そのため例えばヘッダにあるような内包するリンクを自動的にボタン化して左右に配置するような機能は、ありません。フッタにはヘッダ同様のマークアップルールも持っていませんので、レイアウトグリッドなどを使って望ましいデザインを実装するようにしてください。

ボタンの追加

リンクにしろ ボタン にしろ、フッタ内部に記述したものは自動的にボタンの形状になります。スペースを節約するためにも、ボタンは自動的に インラインボタン になり、テキストとアイコンの幅だけ確保することになります。

初期状態では、ツールバーは自由に作成してもらうためにナビゲーションのための余白などを確保していません。他のウィジェット同様に適度な余白をとるには class=“ui-bar” を付与してください。

        Remove
        Add
        Up
        Down

これにより、次のようなフッタが作られます。

ボタンをグループでまとめるために、リンクをラッパーで囲います。そこには data-role=“controlgroup” と data-type=“horizontal” 属性を指定してください。

        
次のようなボタングループが出来ます。
        

          

            Remove Add Up Down
          
        
        
フォーム要素の追加
        
フォーム要素など、他のコンテンツもフッタに記述できます。次の例は select メニューをフッタツールバーに含ませています。
        

          Shipping: 
        
        
固定フッタ
        
フッタをグローバルナビゲーションとして使っている場合など、ページ上にフッタが固定的に表示されていて欲しい場合があるかもしれません。そんな場合は、jQuery Mobileの固定フッタを用いることが出来ます。
        
ページ切り替えにおいてもフッタが留まるようにするには、全ページのフッタに data-id 属性を追加し、全て同じ id を指定します。たとえば、現在と遷移先のページに data-id=“myfooter” という属性を指定したとしましょう。すると、フレームワークはフッタを同じ場所に滞在させたまま、ページ切り替えのアニメーションを行います。ただし、この機能はお互いのページでヘッダとフッタが data-position=“fixed” に指定されている場合のみ有効であることに注意してください。
        

      
      

        

          

            ツールバーの基本
          
          

            ヘッダ
          
          
フッタ
          

            ナビゲーションバー
          
          

            固定ポジションモード
          
          

            フルスクリーン・ポジションモード
          
          

            固定フッタ
          
          

            ツールバーのテーマ
          
        
        

          

            
          
          

            

              [PR] jQuery Mobileリファレンスが書籍になりました
            
            

            
森 直彦 (著)
            
2012年1月20日 発売
            
新品 ￥2,709