jqMobi 1.0のはじめかた（下準備編） - tail -f /var/log/jhoshina.log

jqMobi 1.0が出て1週間経つというのに、「出ました」系記事しかないような感じなので、「使ってみた」系の記事を書いてみようと思う。

1. ダウンロード

https://github.com/appMobi/jQ.Mobi/downloads
から、1.0a.zipをダウソ。1.0.zipと何が違うかは知らない。
展開してテケトーな名前に変更。

mv 1.0a hello

2. 下ごしらえ

ディレクトリ名とかカオスなので整理。ここに出てこないものは削除しちゃっていい。

mv kitchensink styles
mkdir js
cp ui/jq.ui.min.js js

3. テンプレ

http://www.jqmobi.com/quickstart.php のサンプルを俺風味に整理したもの。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>jqMobi Starter</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="styles/icons.css" />
    <link rel="stylesheet" href="styles/jq.ui.css" />
    <link rel="stylesheet" href="styles/default.css" />
  </head>
  <body>
    <div id="jQUi">
      <div id="header">
        <a href="#" id="toggle-nav" class="button" data-ignore="true">Toggle Nav</a>
      </div>

      <div id="content">
        <div title="Welcome" id="main" class="panel" selected="true">
          This is a basic skeleton jqUi sample
        </div>
      </div>

      <div id="navbar">
        <div class="horzRule"></div>
        <a href="#main" id="navbar_home" class="icon home">home</a>
      </div>

      <nav>
        <div class="title">Home</div>
        <ul>
          <li class="icon home mini">
            <a href="#main">Selectors</a>
          </li>
        </ul>
      </nav>
    </div>
    <script src="js/jq.ui.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

styles/default.css

#toggle-nav { float: right; }

js/init.js

(function($) {
  // include touch.js on desktop browsers only
  if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
    var script = document.createElement('script');
    script.src = 'touch.js';
    var tag = $('head').append(script);
    $.os.android = true; //let's make it run like an android device
    $.os.desktop = true;
  }
  $.ui.ready(function () {
    $('#toggle-nav').bind('click', function() {
      $.ui.toggleSideMenu();
      return false;
    });
  });
})(jq);

js/main.js

(function($) {
  $.ui.ready(function () {
    console.log('hello');
  });
})(jq);

これでなんとなく動くはず。
とりあえずスタートアップまで。
手動でやるのがめんどくさいなら、

git clone git://github.com/jhoshina/jqmobi-1.0-startup.git

で。