はじめに
jQuery Mobileは、jQueryを用いたスマートフォン向けのUIライブラリです。本記事では前回に引き続きjQuery Mobileの最新バージョンとなる1.4について、既存Webページを対応させるための修正ポイントについて説明します。後編となる今回は、画面を構成する各種ウィジェットに関する変更点をとりあげます。なお、jQuery Mobile 1.4については前編も参照してください。
対象読者
- Webページで利用しているjQuery Mobileをバージョンアップしたい方
- jQuery MobileのWebページを流行のフラットデザインにしたい方
- 単純にjQuery Mobile 1.4にバージョンアップしてみたが、うまくいかなかった方
必要な環境
今回利用するjQuery Mobileは1.4.1です。jQuery Mobile 1.4.1が対応するjQueryは1.8～1.11、または2.1と案内されていますが、スマートフォン向けWebサイトには1.10系が持つInternet Explorer 6～8との互換性が必要ないことからjQuery 2.1.0を使用します。
今回は以下の環境で動作を確認しています。
-
iOS 7.0.4
- iPhone 5s 16GB SoftBank版
- Safari
-
Android 4.2.2
- Xperia Z SO-02E
- Google Chrome 32.0.1700.99
ウィジェットの修正
jQuery Mobileを用いたWebページ作成において、ウィジェットの活用は欠かせません。前編では、主にページやボタンの記述方法に関する変更点を説明しましたが、後編ではそれ以外のウィジェットについての変更点を説明していきます。なお本記事のサンプルコードには、以下で説明する内容を反映した修正前後のコードが含まれています。
Slider
Sliderが非推奨とされ、Flipswitchで置き換えられました。
［リスト1a］Sliderの変更（変更前）
<form>
<label for="switch">スイッチ：</label>
<select id="switch" name="switch" data-role="slider">
<option value="off">オフ</option>
<option value="on">オン</option>
</select>
</form>
［リスト1b］Sliderの変更（変更後）
<form>
<label for="switch">スイッチ：</label>
<select id="switch" name="switch" data-role="flipswitch">
<option>オフ</option>
<option>オン</option>
</select>
</form>
リストビュー
リストビュー行内に画像を指定したときに自動的に検知してレイアウトされる処理が非推奨となり、liタグにui-li-has-thumbクラスを明示的に指定することが求められるようになりました。また、アイコン画像を指定するui-li-iconクラスも非推奨となりました。
［リスト2a］ListView内画像指定の変更（変更前）
<li>
<a href="img/001.jpg" rel="external">
<img alt="ヤギ" src="img/001_thumb.jpg"/>
<h1>サムネイル</h1>
</a>
</li>
<li>
<img src="img/001_thumb.jpg" class="ui-li-icon" />
<h1>アイコン</h1>
</li>
<li>
<div class="ui-li-thumb"></div>
<h1>画像以外をサムネイルにしたい場合の記述</h1>
</li>
［リスト2b］ListView内画像指定の変更（変更後）
<li class="ui-li-has-thumb">
<a href="img/001.jpg" rel="external">
<img alt="ヤギ" src="img/001_thumb.jpg"/>
<h1>サムネイル</h1>
</a>
</li>
<li class="ui-li-has-thumb">
<img src="img/001_thumb.jpg" style="max-width:16px; max-height:16px;" />
<h1>アイコン</h1>
</li>
<li class="ui-li-has-thumb">
<div class="ui-li-thumb"></div>
<h1>画像以外をサムネイルにしたい場合の記述</h1>
</li>
