ヘッダ・フッタ - header/footer







 ①ヘッダ/フッタの生成  ☆ソース 1.ヘッダー <div data-role="header"><h1>ヘッダ</h1></div> 2.フッター <div data-role="footer"><h1>フッタ</h1></div>

  デモ
1.ヘッダー

ヘッダ


2.フッター

フッタ



 ②ボタン付きヘッダ/フッタ  ☆ソース 1.ボタン付きヘッダ <div data-role="header"><button>ボタン1</button></div> 2.複数ボタン付きヘッダ <div data-role="header"> <button>ボタン1</button> <button>ボタン2</button> <button>ボタン3</button> </div> 3.両端ボタン付きヘッダ <div data-role="header"> <a>ボタン左</a> <a>ボタン右</a> <h1>ヘッダ</h1> </div> 3.補足:ここではaタグを使います。h1を加えないとヘッダが潰れてしまいます。潰れなければ他(button等で)で代替も可能です。 4.グループボタン付きヘッダ <div data-role="header"> <div data-role="controlgroup" data-type="horizontal"> <button>ボタン1</button> <button>ボタン2</button> <button>ボタン3</button> <button>ボタン4</button> </div> </div>     data-role="header"⇒data-role="footer"にすれば、フッタでも同じように使えます。


  デモ
①ボタン付きヘッダ


②複数ボタン付きヘッダ

③両端ボタン付きヘッダ
4.グループボタン付きヘッダ


 ③固定・フルスクリーン設定・ナビゲーションバー

   これらは、実際のページで解説します。

    1.固定ヘッダ・フッタ

    2.フルスクリーン設定

    3.ナビゲーションバー