jQTouchを使ったiPhone用Webサイト作成 - JSONデータを動的にリスト表示

iPhone JavaScript Ajax

前回id:fits:20100715、iUI を使って作成したiPhone用のWebページと同等のものをjQTouchで作成してみました。（サーバー側の処理は同じものを使用）

基本的な処理内容に前回のiUI版との違いはなく、動的に生成するHTMLの内容だけが異なるという結果になりました。

画面構成は前回と同じで以下のようになっています。

(1) DBのリスト表示画面

(2) テーブルのリスト表示画面（mysql 選択時）

(3) テーブルの詳細表示画面（columns_priv 選択時）

jQTouch でのリスト表示

前回と同様に、まず静的な HTML で今回の画面構成を書いてみます。

ツールバー（戻るボタン含む）を画面毎に用意している点が iUI と異なっていますが、a 要素の href 属性で遷移先画面の id を設定する点などの基本的なところは同じです。
(3) テーブルの詳細表示画面は、良さそうなスタイル定義が見つからなかったので、自分でスタイル定義しました。

なお、class="current" を指定した画面（要素）がメイン画面となるようです。

index_static.html (information_schema と CHARACTER_SETS のリンクのみ有効)
<!DOCTYPE html>
<html>
<head>
  <title>Nested List Sample</title>
  <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
  <style type="text/css" media="screen">@import "themes/apple/theme.min.css";</style>
  <style type="text/css">
    .row {
      background: rgb(240, 240, 240);
      font-size: 12px;
    }
    .row > span {
      position: absolute;
      left: 120px;
    }
  </style>
  <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    $.jQTouch({});
  </script>
</head>
<body>
  <!-- (1) DBのリスト表示画面 -->
  <div id="db" class="current">
    <div class="toolbar">
      <h1 id="pageTitle">DB</h1>
    </div>
    <ul id="db_list" class="rounded">
      <li class="arrow"><a href="#information_schema" id="information_schema_link">information_schema</a></li>
      <li><a href="#mysql" id="mysql_link">mysql</a></li>
    </ul>
  </div>
  <!-- (2) テーブルのリスト表示画面 -->
  <div id="information_schema">
    <div class="toolbar">
      <h1>information_schema</h1>
      <a class="button back" href="#db">DB</a>
    </div>
    <ul id="information_schema_list">
      <li class="arrow"><a href="#information_schema___CHARACTER_SETS">CHARACTER_SETS</a></li>
      <li><a href="#information_schema___COLLATIONS">COLLATIONS</a></li>
    </ul>
  </div>
  <!-- (3) テーブルの詳細表示画面 -->
  <div id="information_schema___CHARACTER_SETS">
    <div class="toolbar">
      <h1>CHARACTER_SETS</h1>
      <a class="button back" href="#information_schema">information_schema</a>
    </div>
    <ul>
      <li class="row">
        <label>table_name</label>
        <span>CHARACTER_SETS</span>
      </li>
      <li class="row">
        <label>table_type</label>
        <span>SYSTEM VIEW</span>
      </li>
    </ul>
  </div>
</body>
</html>

JSON データの動的リスト表示

JSON データを動的にリスト表示する場合もiUI版と基本的な処理は同じです。
ただし、画面毎にツールバーを用意し、戻るボタンを自前で設定している点が異なっています。
また、iPhone の実機上では click イベントが正常に発生しなかったため（タップの仕方によっては発生する場合もある）、tap イベント発生時にテーブルの内容を取得するように実装。（PC上のWebブラウザにも対応させるため click と tap を $.support.touch の値で切り替えるようにしている）

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Nested List Sample</title>
  <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
  <style type="text/css" media="screen">@import "themes/apple/theme.min.css";</style>
  <style type="text/css">
    .row {
      background: rgb(240, 240, 240);
      font-size: 12px;
    }
    .row > span {
      position: absolute;
      left: 120px;
    }
  </style>
  <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    $.jQTouch({});

    //iPhone の場合、click イベントが正常に発生しないため
    //tap イベントに変更
    var clickTrigger = ($.support.touch)? "tap": "click";

    $(function() {
      $("#db_list").empty();

      $.get("informations/databases", null, function(res){
        $.each(res, function() {
          var db = this.table_schema;

          //DB毎の (2) を作成
          var content = "<div id='" + db + "'>";
          content += createToolbar(db, "db");
          content += "<ul id='" + db + "_list'></ul>";
          content += "</div>";
          $(document.body).append(content);

          //(1) にDB毎の (2) へのリンクを追加
          $("#db_list").append("<li class='arrow'><a id='" + db + "_link' href='#" + db + "'>" + db + "</a></li>");

          $("#" + db + "_link").bind(clickTrigger, function(e) {
            $("#" + db + "_list").empty();

            $.get("informations/tables/" + db, null, function(res2){
              $.each(res2, function() {
                //(3) を作成
                var link = createDetailsPanel(db, this);

                //(2) にテーブル毎の (3) へのリンクを追加
                $("#" + db + "_list").append("<li class='arrow'><a href='#" + link + "'>" + this.table_name + "</a></li>");
              });
            }, "json");
          });
        });
      }, "json");
    });

    /**
     * 詳細表示パネルを作成する
     */
    function createDetailsPanel(db, item) {
      var id = db + "___" + item.table_name;

      $("#" + id).remove();

      $(document.body).append("<div id='" + id + "'></div>");

      var headers = ["table_name", "table_type", "engine", "create_time"];

      var html = createToolbar(item.table_name, db);
      html += "<ul>";

      $.each(headers, function() {
        html += "<li class='row'>";
        html += "<label>" + this + "</label>";
        html += "<span>" + item[this] + "</span>";
        html += "</li>";
      });

      html += "</ul>";

      $("#" + id).append(html);

      return id;
    }

    /**
     * ツールバーを作成する
     */
    function createToolbar(title, back) {
      var result = "<div class='toolbar'>";
      result += "<h1>" + title + "</h1>";
      //戻るボタンの設定
      result += "<a class='button back' href='#" + back + "'>" + back + "</a>";
      result += "</div>";

      return result;
    }
  </script>
</head>
<body>
  <!-- (1) DBのリスト表示画面 -->
  <div id="db" class="current">
    <div class="toolbar">
      <h1 id="pageTitle">DB</h1>
    </div>
    <ul id="db_list" class="rounded"></ul>
  </div>
</body>
</html>