ヘッダ・フッタ - header/footer
①ヘッダ/フッタの生成
☆ソース
1.ヘッダー
<div data-role="header"><h1>ヘッダ</h1></div>
2.フッター
<div data-role="footer"><h1>フッタ</h1></div>
デモ
デモ
1.ヘッダー
2.フッター
ヘッダ
2.フッター
フッタ
②ボタン付きヘッダ/フッタ
☆ソース
1.ボタン付きヘッダ
<div data-role="header"><button>ボタン１</button></div>
2.複数ボタン付きヘッダ
<div data-role="header">
<button>ボタン１</button>
<button>ボタン２</button>
<button>ボタン３</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>ボタン１</button>
<button>ボタン２</button>
<button>ボタン３</button>
<button>ボタン４</button>
</div>
</div>
data-role="header"⇒data-role="footer"にすれば、フッタでも同じように使えます。
デモ
デモ