jQuery Mobile メモその1

Getting Started（jQM v1.1.0）

公式サイト http://jquerymobile.com/
CDNを利用して実装した方が多分良いと思いますが、勉強もかねてzipダウンロードしてやって行こうと思います。
そもそもカスタマイズしたテーマやスウォッチ（※1）を利用する場合はCDNのCSSを外す必要がありそうですしね。
ダウンロードしたものに以下が含まれる（minifyのものは除いている）。

demos（デモ）
images（ローディング画像やicon画像）
jquery.mobile-1.1.0.js（本体）
jquery.mobile-1.1.0.css（メインのCSS）
jquery.mobile.theme-1.1.0.css（デフォルトのテーマ）
jquery.mobile.structure-1.1.0.css（構造のみのCSS）

CSSファイルが沢山あるが基本的に jquery.mobile-1.1.0.css でOK。
独自のテーマを利用する場合は作成したthemeのCSSと構造のみ定義したjquery.mobile.structureを利用する感じ。
つまり jquery.mobile-1.1.0.css もしくは theme + structure のいづれかになりそう。

基本的に以下のテンプレートがベースになる感じ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" contetnt="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.css" />
  <script src="./js/jquery-1.7.1.min.js"></script>
  <script src="./js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

</body>
</html>

contetnt="width=device-width, initial-scale=1"
これは初期表示倍率１倍で、画面サイズに合わせて表示する指定。

jQuery Mobile の特徴

HTML5, CSS3を利用しており、ノンプログラミングでクロスプラットフォームなモバイルページ作成が可能
ページ遷移が独特で、ランディングページ以外のページはhead領域が無視され、コンテンツ部分のみのロードとなる。

jQMでは data-role="page" 属性をDIVに付与してページを定義する。
またページ間遷移が基本的にAjaxであり、この際に遷移先ページのdata-role="page" が定義されたDIV要素のみを読み込み、現在のDOMツリーに追加する。この為に遷移先ページのheadに記載されている外部ファイルの読込みなどは実行されない。

pushStatusによるページ遷移（未対応の場合はハッシュベースURLによる遷移管理になる）
プリフェッチによるページ先読みや、DOMキャッシュによるページ情報保持選択が可能

ちょっとここまで。後で。