ヘッダ内にボタンを表示してみる
ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示されます。リンクは２つまで設定でき、ヘッダ内の1つ目のリンクが左側、２つ目が右側に表示されます。リンクの位置は<h1>～<h6>の前後とすることもでき、aタグを２つ続けて作成しても表示は同様です。
ちなみに、ヘッダ内にリンクが１つだけ存在するときは、左側にボタンが表示されますが、右側に表示したいときはaタグにclass="ui-btn-right"を付します。
フッタ内にボタンを表示してみる
フッタ内にボタンを表示させるには、ボタンとなるリンクを作成します。このとき、フッタの上下幅がボタンと大差が無くなって、ボタンの上下に残るフッタ余白がほとんどなくなります。ですが、フッタとなるタグにclass="ui-bar"を付すことで、ボタン上の上下に余白ができて、フッタが高さが大きくなります。
ヘッダ内、フッタ内にボタンを付したサンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jqueryMobileのヘッダにボタンを表示する</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section data-role="page"> <!-- ヘッダの左側にボタンを表示 --> <header data-role="header"> <h1>ヘッダ</h1> <a href="#">左</a> </header> <!-- ヘッダの両端にボタンを表示 --> <header data-role="header"> <h1>ヘッダ</h1> <a href="#">左</a> <a href="#">右</a> </header> <!-- ヘッダの右側にボタンを表示 --> <header data-role="header"> <h1>ヘッダ</h1> <a href="#" class="ui-btn-right">右</a> </header> <!-- フッタにボタンを表示 --> <footer data-role="footer" class="ui-bar"> <a href="#">ボタン１</a> <a href="#">ボタン２</a> </footer> </section> </body> </html> |
class="ui-btn-right"を付すと
ヘッダ内のボタンと同じように、aタグにclass="ui-btn-right"を付すとボタンは右側に表示されます。