ナビゲーションバー - navigation bar




 ①ナビゲーションバー - navigation bar  ☆ソース <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="遷移先のURL1">コンテンツ1</a></li> <li><a href="遷移先のURL2">コンテンツ2</a></li> <li><a href="遷移先のURL3">コンテンツ3</a></li> </ul> </div> </div>  デモ

  ここではダイアログを出すだけにしていますが、それぞれにリンクを設けて(ホーム、検索、設定など)遷移させるのが一般的です。
  ※<li>の列を増やせば、分割数を増やせます。また、画面の最上部に設置するのが一般的です。




 ②アイコン付きナビゲーションバー - icon navigation bar
 ☆ソース <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="遷移先のURL4" data-icon="delete" data-theme="a">コンテンツ4</a></li> <li><a href="遷移先のURL5" data-icon="grid" data-theme="b">コンテンツ5</a></li> <li><a href="遷移先のURL6" data-icon="plus" data-theme="c">コンテンツ6</a></li> <li><a href="遷移先のURL7" data-icon="gear" data-theme="e">コンテンツ7</a></li> </ul> </div> </div>  デモ


  アイコン一覧はこちら