ツールバー関連

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>