jQuery Mobile

ブログのタイトルと少し離れるけど，ここ3回にわたってJavascriptのライブラリについて説明する．

jQuery Mobileとは

JavascriptのライブラリであるjQueryのモバイルプラットフォーム向けのフレームワークである．
HTMLの属性にjQuery Mobileで用いる属性を追加するだけでモバイル向けのページが簡単にできあがる．
動作もjQueryを用いて記述できるため開発が行いやすい．
と，基本的なことを書いたが，基本的な使い方はこの記事では記述しないので適宜調べてほしい．
また,今回の記事は1.0Beta2以降を対照としている(執筆時点での最新版は1.0 final).

jQuery Mobileでページ内のオブジェクトを動的に更新

jQuery Mobileはページを描画する段階のHTMLで動的にモバイル向けのページを生成する．
そのため，サーバからの受信したデータなどに応じてページの描画を変更する場合ちょっとしたテクニックが必要になる．

data-role="listview"の場合

以下のようなリストに対して，

このようにデータを追加する場合

以下のコードで動的に更新が可能である．

この方法は割と日本語でも解説が出てくる．

フォームの場合

例えばラジオボタンの選択状況を変更した場合，Javascriptでフォームの状態を変更しても反映されない．
対処法はフォームごとに違うため，ここではラジオボタンを例に挙げる.
そのほかの設定はこちら
HTMLが次のような場合

Check 2に対してチェックする場合,以下のコードで動的にチェック可能

すでに表示されているページを動的に変更する場合

上記の2つ以外でページを書き換えたい場合が出てくるときがある．
その場合は.trigger('create')を用いる．
以下のHTMLのdivの内容を全部書き換える場合

スクリプトは

ほんとはBeta2が出たあたりで記事にしたかったんだが,時間がとれなかったので今回記述．
ほかにも,2ペインビューを作成したが最近プラグインが出たのでこれは実装してから記事にする.
あとは,iScrollのjQuery向けプラグイン(問題あり)や,GoogleMap用のプラグインについては時間が出来たら記事にする.
次の更新はいつになることやら...