読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

ナビゲーションバーを表示してみる

jQuery Mobile
<スポンサーリンク>

ナビゲーションバーは5つまでは横並びに表示できるけれど、6つ以上になると、2列の並びになってしまう。

ナビゲーションを定義するのは、

<div data-role="navbar">

というもの。

こんな風に表示してみる。
f:id:sho322:20140628234630j:plain

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=divice-width, initial-scale=1">
	<title>jQuery Mobile Example</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
  <script src="js/simple-tooltip/js/tips.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="one">
  <div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#one" class="ui-btn-active">26日</a></li>
        <li><a href="#two">27日</a></li>
        <li><a href="#three">28日</a></li>
      </ul>
    </div>
  </div>
</div>

<div data-role="page" data-theme="b" id="two">
  <div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#one">26日</a></li>
        <li><a href="#two" class="ui-btn-active">27日</a></li>
        <li><a href="#three">28日</a></li>
      </ul>
    </div>
  </div>
</div>

<div data-role="page" data-theme="b" id="three">
  <div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#one">26日</a></li>
        <li><a href="#two">27日</a></li>
        <li><a href="#three" class="ui-btn-active">28日</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>


ヘッダーを固定するには以下のように書く。

<div data-role="header" data-position="fixed">

ページを移動するのがくるりと画面が回転するように、設定するのは、

<li><a href="#two" data-transition="flip">25日(金)</a></li>

のようにする。

まだ全然作ってる途中なんだけど、旅のしおりみたいなサイトを作るには、

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=divice-width, initial-scale=1">
	<title>jQuery Mobile Example</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
  <script src="js/simple-tooltip/js/tips.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="one">
  <div data-role="header" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#one" class="ui-btn-active">24日(木)</a></li>
        <li><a href="#two" data-transition="flip">25日(金)</a></li>
        <li><a href="#three" data-transition="flip">26日(土)</a></li>
        <li><a href="#four" data-transition="flip">27日(日)</a></li>
      </ul>
    </div>
  </div>

  <div data-role="content">
    <p>この日は福岡旅行の日</p>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider" data-tooltip="HOGE">14時</li>
      <li><a href="http://www.hakata-shinshin.com/" target="_blank"><img src="img/shin_shin.jpg">ラーメンshinshin</a></li>
    </ul>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">15時</li>
      <li><a href="http://www.dazaifutenmangu.or.jp/" target="_blank"><img src="img/dazaihu.jpg">太宰府</a></li>
    </ul>
  </div>

</div>

<div data-role="page" data-theme="a" id="two">
  <div data-role="header" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#one" data-transition="flip">24日(木)</a></li>
        <li><a href="#two" class="ui-btn-active">25日(金)</a></li>
        <li><a href="#three" data-transition="flip">26日(土)</a></li>
        <li><a href="#four" data-transition="flip">27日(日)</a></li>
      </ul>
    </div>
  </div>

  <div data-role="content">
    <p>この日は長崎</p>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider" data-tooltip="HOGE">10時</li>
      <li><a href="http://www.voyage1996.com/"><img src="img/soup.jpg">ヴォイジュ</a></li>
    </ul>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">11時</li>
      <li><a href="#"><img src="img/tokei.jpg">時計台</a></li>
    </ul>
  </div>

</div>

<div data-role="page" data-theme="a" id="three">
  <div data-role="header" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#one">24日(木)</a></li>
        <li><a href="#two">25日(金)</a></li>
        <li><a href="#three" class="ui-btn-active">26日(土)</a></li>
        <li><a href="#four">27日(日)</a></li>
      </ul>
    </div>
  </div>
</div>

<div data-role="page" data-theme="a" id="four">
  <div data-role="header" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#one">24日(木)</a></li>
        <li><a href="#two">25日(金)</a></li>
        <li><a href="#three">26日(土)</a></li>
        <li><a href="#four" class="ui-btn-active">27日(日)</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

みたいに書く。
すると、以下のように表示される。

f:id:sho322:20140628234642j:plain

jQuery Mobileパーフェクトガイド 基本からデザインカスタマイズ、パフォーマンスアップまで

jQuery Mobileパーフェクトガイド 基本からデザインカスタマイズ、パフォーマンスアップまで

  • 作者: 吉川徹,株式会社シーエー・モバイル
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2012/08/24
  • メディア: 単行本(ソフトカバー)
  • 購入: 1人 クリック: 7回
  • この商品を含むブログ (3件) を見る