ツールバー関連
jQuery Mobileのツールバー関連について書きます。
まずは、ヘッダとフッタの表示方法についてです。
ヘッダを表示させる場合は、
DIVタグに[data-role="header"]を定義するだけで、ヘッダ表示ができます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/library/jquery.mobile-1.1.1.css" /> <script src="js/library/jquery.js"></script> <script src="js/library/jquery.mobile-1.1.1.js"></script> </head> <body> <div data-role="header" > <h1>ヘッダ</h1> </div> </body> </html>
フッタを表示させる場合は、
DIVタグに[data-role="footer"]を定義するだけで、フッタ表示ができます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/library/jquery.mobile-1.1.1.css" /> <script src="js/library/jquery.js"></script> <script src="js/library/jquery.mobile-1.1.1.js"></script> </head> <body> <div data-role="header" > <h1>ヘッダ</h1> </div> <div data-role="footer"> <h1>フッタ</h1> </div> </body> </html>
それで、ヘッダとフッタを固定することが可能で、[data-position="fixed"]を定義しておくと
ヘッダとフッタを固定させることができます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/library/jquery.mobile-1.1.1.css" /> <script src="js/library/jquery.js"></script> <script src="js/library/jquery.mobile-1.1.1.js"></script> </head> <body> <div data-role="header" data-position="fixed"> <h1>ヘッダ</h1> </div> <div data-role="footer" data-position="fixed"> <h1>フッタ</h1> </div> </body> </html>
次にナビゲーションバーに関してですが、
フッタをナビゲーションバーにしたいと思います。
フッタの箇所にもう1つDIVタグを追加して、[data-role="navbar"]を定義します。
そして、その中にリストとリンクを書けばナビゲーションバーを表示することが可能です。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/library/jquery.mobile-1.1.1.css" /> <script src="js/library/jquery.js"></script> <script src="js/library/jquery.mobile-1.1.1.js"></script> </head> <body> <div data-role="header" data-position="fixed"> <h1>メイン</h1> </div> <div class="content"> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="">ホーム</a></li> <li><a href="">一覧</a></li> </ul> </div> </div> </body> </html>