jQuery Mobileのメモ ＆ POMERAの使用感
友人の結婚式がありましたので、新幹線で地方から東京へ行ってまいりました。以下のメモは、その道中でjQuery Mobileのお勉強をした際の記録メモです。これまた、仕事上で理解しておく必要がありそうですので。
ちなみに、新幹線道中でのメモには『KINGJIM POMERA DM20
DM20
と、余談はこれぐらいにして、以下メモです。今回はO’Reillyの『実践 jQuery Mobile
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>
・ブラウザに対して、表示領域とデバイスの画面の横幅を一致（サイズ比１対１）させることを通知
・ジェスチャによるスケール変更を禁止
jQuery Mobileでは、通常のHTMLタグに対して、data-*属性（カスタム属性）を記述することで、JQMのフレームワークが行う処理を指定する。data-*属性はHTML5の仕様の中で定義された、任意の属性を追加するための仕様で、HTML5に対応していないブラウザでは無視されるようになっている。
data-theme属性で指定するのは、スウォッチ（色見本）。デフォルトでは”a”〜”e”で指定する。aから順に黒、青、銀（デフォルト）、グレー、黄。任意の要素で指定可能で、親要素で指定されたスウォッチは、別のスウォッチが指定されない限り子孫の要素にも適用される。
一般的に、ページはヘッダー、コンテンツ、フッターの３つのパーツからなる。
<div data-role=”page”>
<div data-role=”header”>
<h1> </h1>
</div>
<div data-role=”content”>
</div>
<div data-role=”footer”>
<h4> </h4>
</div>
</div>
リンク（<a href>）の書き方は４つ。
・内部リンク（同一htmlファイル内でのリンク）
・外部リンク（JQMの別htmlファイルへのリンク）
・絶対リンク（非JQMファイルへのリンク）
・特殊リンク
内部リンクは、<a href=”#id名”>のように書く。<a href=”#”>とすると、デフォルトではどこにも飛ばないリンクになる（別途、javascriptで動作を設定できる）
外部リンクは、<a href=”other.html”>のように書く。リンク先のドキュメントに対してajaxでリクエストを行い、リクエスト先の最初の<div data-role=”page”>の内容を取得して、自分のDOMの中に埋め込む（内部リンクと同じ扱いができるようにする）。これによって、スムーズに別ファイルのページに移動できるようにしている。ただし、最初の<div data-role=”page”>の内容以外は、JQMのフレームワーク上ではすべて無視されるので注意。
絶対リンクは、<a href=”../hogehoge.js” data-rel=”external”>のように書く。JQMのコンテンツではないドキュメント（javascriptファイルなど）に対してリンクを行いたいときに使用する。
前のページに戻るボタンを自分で記述する場合には、ボタンの要素でdata-rel=”back”を指定する。
ナビゲーションバーでは、複数のリンクをツールバーに配置することによって、排他的な選択肢を提示できる。nabvarロールのタグの中に、リンクを箇条書きすればOK。
<div data-role=”navbar”>
<ul>
<li><a href=”#link1″ class=”ui-btn-active”>リンク１</a>
<!– –>
<li><a href=”#link2″>リンク２</a>
</ul>
</div>
この場合、リンク１があらかじめ選択状態になる（色が変わる）
<div data-role=”content”>コンテナの中では、どのようなHTMLのコードも機能する。
折り畳み可能なコンテンツを作るには、contentロールの中に<div data-role=”collapsible”>コンテナを用意すればよい。中にはhx要素が１つ必要（例えばh2）。折り畳まれた状態で表示するには、コンテナの要素でdata-collapsed=”true”を指定する。
複数の中から一つだけ開いておきたい場合（いわゆるアコーディオン）にしたい場合は、<div data-role=”collapsible-set”>コンテナをつくり、その中にcollapsibleロールのコンテナを入れていく。デフォルトでは、アコーディオンの中で末尾のパネルが展開された状態で表示される。末尾以外のパネルが開かれた状態にしたい場合は、そのパネルの要素でdata-collapsed=”false”を指定し、その他すべてのパネルにはdata-collapsed=”true”を指定する。
JQMでリストを作りたい場合は、<ul>（箇条書き）か<ol>（番号つき箇条書き）にdata-role=”listview”を加えればOK。画面いっぱいのリストにしたくない場合は、さらにdata-inset=”true”を加える。
フォームを作る際、きちんとラベルを定義してあげれば、ラベルをタッチすると対象のフォームコントロールにフォーカスが移り、そのコントロールをすぐに利用できるようになる。
フォームを作る際は、フィールドコンテナをきちんと設定してやると、端末に応じて、ラベルと入力フィールドが適切に配置されるようになる。
<div data-role=”fieldcontain”>
<label for=”company”>会社名：</label>
<input type=”text” id=”company” name=”company”>
</div>
<div data-role=”fieldcontain”>
<label for=”email”>メールアドレス：</label>
<input type=”email” id=”email” name=”email”>
</div>
複数行入力させる場合は、inputではなくtextareaを使う。
<div data-role=”fieldcontain”>
<label for=”comments”>コメント：</label>
<textarea id=”comments” name=”comments”></textarea>
</div>
セレクトメニューを使いたい場合は、次のように書く。
<label for=”training”>トレーニング</label>
<select id=”training” name=”training”>
<option value=”1″>HTML5</option>
<option value=”2″>jQuery Mobile</option>
</select>
ラジオボタンを作るときには、選択肢を表すinput要素にはすべてtype=”radio”を指定し、同じグループに含まれるすべてのinput要素で、name属性に同じ値を指定する。
<legend>メニューの種類</legend>
<label for=”menu1″>メニュー１</label>
<input type=”radio” id=”menu1″ name=”menuType” value=”1″>
<label for=”menu2″>メニュー２</label>
<input type=”radio” id=”menu2″ name=”menuType” value=”1″>
legendコンテナ以外を<div data-role=”controlgroup”>の中に納めると、さらにきれいに表示される。さらに、controlgroup要素でtype=”horizontal”を追加すると、横並びのラジオボタンになる。
チェックボックスの作り方は、ラジオボタンとほぼ同様。typeがチェックボックスに変わる。また、nameを選択肢の間で揃える必要はない。
<legend>配送オプション</legend>
<div data-role=”controlgroup”>
<label for=”optionGift”>ギフト包装</label>
<input type=”checkbox” id=”optionGift” name=”optionGift” value=”yes”>
<label for=”optionBag”>袋を付ける</label>
<input type=”checkbox” id=”optionBag” name=”optionBag” value=”yes”>
</div>
とりあえず、以上。