@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryMobileでiPad向けの2カラムのWebページをデザインする その2

前回はレイアウトを組むところまででした。今回は組んだレイアウトの中にコンテンツを入れていこうとおもいます。

メニューを作る

まずは、jQueryMobileのListViewを入れます。

  • sample.html
<ul data-role="listview">
  <li><a href="#">Menu-1</a></li>
  <!-- 20個くらい繰り返し -->
</ul>

これはこまった、スクロール出来ませんし、ヘッダは固定しておきたいですね。そして、メニューのリストが左右にぴっちりしていません。ここをスタイルで変えていきましょう。
ポイントは、

  • .ui-block-aの部分にoverflow: auto; -webkit-overflow-scrolling: touch;を設定する。
    • -webkit-overflow-scrolling: touch;はiOS5〜のみで、以前のバージョンではサポートされていません。
  • headerの部分にposition: fixed; top: 0; z-index: 5;を設定する。
    • z-indexは5でなくても良いですが、なるべく最前面に出るようにする。
  • data-role="content"の部分のpadding-top: 56px;を設定する。

の3点になるかと思います。実際に動かしてみると、ヘッダ部分がスクロール中は付いて来てしまいます。これは仕方ないとおもいますので、妥協しておきましょう。
そして、listviewが横幅いっぱいでないことは、ul li {margin-left: 0px; margin-right: 0px;}とすることで回避できます。
ついでにコンテンツになる部分も同様のスタイルを設定しておきましょう。

div.ipad-grid {
    height: 100%;
}

div.ipad-grid div.ipad-menu-block {
	width: 301px;
    height: 672px;
    border: solid 1px #666666;
    border-right: none;
    border-radius: 5px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.ipad-grid div.ipad-menu-block header.ipad-menu-header {
	position: fixed;
	top: 0;
    width: 300px;
    border: solid 0px 1px 0px 0px #666666;
    border-radius: 5px 5px 0px 0px;
    z-index: 5;
}

div.ipad-grid div.ipad-menu-block div.ipad-menu-body {
    padding-top: 56px;
}

div.ipad-grid div.ipad-menu-block div.ipad-menu-body ul li {
	margin-left: 0px;
	margin-right: 0px;
}

div.ipad-grid div.ipad-content-block {
	width: 723px;
    height: 672px;
    border: solid 1px #666666;
    border-radius: 5px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div.ipad-grid div.ipad-content-block header.ipad-content-header {
    position: fixed;
    top: 0;
    width: 722px;
    border: solid 0px 1px 0px 0px #666666;
    border-radius: 5px 5px 0px 0px;
    z-index: 5;
}

div.ipad-grid div.ipad-content-block div.ipad-content-body {
    padding-top: 56px;
}

div.ipad-grid div.ipad-content-block div.ipad-content-body ul li {
    margin-left: 0px;
    margin-right: 0px;
}

メニュー部分はこんな感じになりました。

コンテンツを作る

コンテンツは好きなものを置いたらよろしいと思います。
なので、適当なものを書いて行きましょう。

  • sample.html
<form>
  <label for="searchText">検索:</label>
  <input type="search" name="searchText" id="searchText"/>
  <label for="searchDueDate">期限:</label>
  <input type="date" name="searchDueDate" id="searchDueDate" />
  <label for="searchStatus">ステータス:</label>
  <select id="searchStatus" name="searchStatus">
    <option>----</option>
    <option value="0">未着手</option>
    <option value="1">作業中</option>
    <option value="2">完了</option>
  </select>
  <button data-theme="b">検索</button>
</form>
<h2>検索結果</h2>
<ul data-role="listview" data-inset="true">
  <li>
    <a href="#">
      <h3>TODO-1</h3>
      <p class="ui-li-aside">2012/12/30 まで</p>
      <p><strong>未着手</strong></p>
    </a>
  </li>
  <!-- 繰り返し -->
</ul>

TODO管理的なものですかね。