jQueryMbile個人的まとめ

jQueryMobileをちょろっと使ってみました。
今後も使う機会が多いのでまとめときます。きっとあとで追記したりする。
ちなみに使ったバージョンは1.0b1

基本中の基本

  1. data-role="page"で囲む
  2. 基本的にはdata-role="header" , data-role="content" , data-role="footer"で区切る
  3. 1ページに複数のdata-role="page"を持つことも可能(どういうとき使うの?普通に別ページに飛ばすときとどう作り分ける?)
  4. 戻るボタンはdata-rel="back"(ただしhref属性には値を入れる)
  5. ヘッダーに戻るボタンをつける場合はpageにdata-add-back-btn="true"を付与(デフォルトではオフになってる)

俺俺テンプレート

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>

<!-- βからはviewportを勝手に設定しなくなった? -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--アプリケーションモードを使う場合-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- jQueryMobileの設定を上書きする場合はここで -->
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

</head>
<body>
<div data-role="page" class="page" data-add-back-btn="true">
<div data-role="header" data-theme="b" class="header">
<h1>title</h1>
<a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<!-- /header --></div>
<div data-role="content" class="content">
<p>content</p>
<!-- /content --></div>
<div data-role="footer" class="footer">
<p>fotter</p>
<!-- /footer --></div>
<!-- /page --></div>

</body>

リンク

  • 下記の指定をするとAjax遷移をしない

 rel="external" , data-ajax="false" , target="hoge"

トランジション

リンクにdata-transitionを指定

  1. slide(デフォルト)
  2. slideup(下から)
  3. slidedown(上から)
  4. pop(ふわーんってなる)
  5. fade(popと違いがよくわからん)
  6. flip(多分3Dっぽく入れ替わるんだけど微妙じゃね?)

※動きを逆にする場合はdata-direction="reverse"を指定

ダイアログ

リンクにdata-rel="dialog"を指定

  • 履歴に残らない
  • 適当に四方に余白を取ってダイアログっぽくしてくれる

テーマ

data-theme="a" a-e

ヘッダ、フッタ

  • フッタ内のリンク、ボタンは全てボタン形状になる
  • 全ページで固定にする場合は全てのヘッダ(フッタ)に同じdata-idを指定してdata-position="fixed"を指定する

ナビゲーションバー

divにdata-role="navbar"

  • 5個まで1行で表示

ボタン

ボタン要素にdata-role="button"

  • アイコンを指定する場合はdata-icon="arrow-l"
  • アイコンの表示位置指定はdata-iconpos top , left , right , bottom

http://dev.screw-axis.com/doc/jquery_mobile/#/doc/jquery_mobile/components/buttons/buttons_icons/

  • よく使いそうなもの
    • 矢印 arrow-l , arrow-r , arrow-u , arrow-d
    • 削除 delete
    • プラス plus
    • チェック check
    • 設定 gear
    • リロード refresh
    • ホーム home
    • 検索 search
  • data-inline="true"でインラインボタン(テキスト内容に合わせて長さを調整)
  • グループボタン
    • ボタンをdata-role="gontrolegroup"で囲む
    • data-type="forizontal"で横方向

レイアウトグリッド(本当に必要なときだけ使うように)

  • class="ui-grid-a/b/c/d"(a:2カラム〜d:5カラム)
  • class="ui-bock-a/b/c"(子コンテナ)
  • 各グリッドは親要素の長さから均等に分割される

開閉式コンテンツ

data-role="collapsible"
data-collapsed="true"(ロード時に閉じている)

フォーム

  • 必ずaction,methodの指定されたformで囲む
  • idを指定するときはページ内だけでなくサイト全体でユニークにすること
  • ラベルとinput要素はdata-role="fieldcontain"で囲むこと推奨
  • その他色々ありそうだけど、現状使ってないのでなんとも。きっと後で追記

リスト

data-role="listview"

  • 分類リスト
    • li data-role="list-divider"を指定
  • サムネイルを表示する場合は単純にアイテムの最初の要素に画像を追加すればいい80px四方になる
    • 16px四方にする場合はui-li-iconクラスを指定する
  • 他のコンテンツとリストを同居させる場合はul,olにdata-inset="true"を追加する
  • 動的にアイテムを追加した場合は$(list).listview("refresh")を呼ぶ
  • フィルタとか色々あるけど使ってないのできっと後で追記

ざっとこんな感じ。ぶっちゃけ、ボタンとリストとナビゲーションさえ抑えておけば後は普通のWebアプリと同じような感じで出来るイメージ。簡単なものならだけど。
ただ、Ajax遷移はまだまだ微妙な気がします。特にAndroidだと不自然な遷移になる事が多々あったので、今回はAjax遷移をしないようにしています。