スマートフォン対応サイトを作るのに便利な jQuery Mobile の最新版が発表されました。新機能としては、ポップアップ、折りたたみが可能なリスト、リストの自動振り分け機能がお目見え。動作も速くなったようです。

via: Announcing jQuery Mobile 1.2.0 Final | jQuery Mobile

jQM 1.2 を使うためには、jQuery の 1.7.0以上(~1.8.2・20121003現在)が必要です。以下のように外部から読み込んでもOK。

というわけで新機能をざっくりレビュー!

1. ポップアップ機能

デモ:jQuery Mobile Docs – Popup

基本的にはダイアログと似ています。
ポップアップとダイアログの違いは、背景が(半)透明なことと、ポップアップ画面外をタップ(クリック)すればポップアップが消えること。
ダイアログは画面が暗くなり、ボタンを押さないと消えませんでした。

ポップアップは閉じるボタンでも消すことができますし、デバイスの戻るボタン(= history.back)にも対応しています。
ただ、タブでの移動はポップアップの下画面にも有効になっています。個人的には許容範囲ですが。

使い方

ポップアップで表示させたい div に data-role=”popup” 要素を追加してidを付与し、アンカータグのリンクにidを設定します。(ダイアログの使い方とほぼ同じ)

何も設定しない場合

1行のテキストを表示します。

ツールチップ表示

複数行のテキストを表示します。画面の色は data-theme で制御。

メニューを表示

リストメニューが使えます。省スペースでいいですね。

階層メニューを表示

ネストしたメニューにも対応しています。これはいい省スペース!

ログイン画面を表示

フォームもポップアップで表示できます。

ダイアログを表示

そのへんをタップすれば消えるタイプ。こっちの方が使い勝手がイイ?

写真を表示

閉じるボタンを組み合わせて使っています。これがあれば lightbox を用意しなくてもいいですね。

その他にもできること

画面に合わせてサイズを自動調整する方法もあります。

jQuery Mobile Docs – Popup images

動画や地図も表示できます。
動画には閉じるボタンついてないので、画面外をクリックしてポップアップを消すのですが、ちょっとバグってしまいました。ビックリ。

jQuery Mobile Docs – Popup iframes

右からにゅっとメニューを出すこともできます。

jQuery Mobile Docs – Popup panels

オプションでポップアップの表示場所を変えたり、表示方法(トランジション)を変えたりすることもできます。

2. 折りたたみ可能なリスト

デモ:jQuery Mobile Docs – Collapsible lists

これは嬉しい!
今まで折り畳まれたリストを表示したい時は、折りたたみコンテンツの中に入れるしかなかったのですが、リスト自体の折りたたみ表示をできるようになりました。
しかもリストの様々な表示方法を受け継いでいるので、検索やサムネイルつきのリストも使えます。
一度開いたリストを閉じることも、そのままにしておくこともできます。
アイコンやテーマも変更可能。複雑なオプションはないので、デモを見れば直感的にわかるかと思います。

3. リストの自動振り分け機能(Autodeviders)

デモ:jQuery Mobile Docs – List Autodividers

リストに data-autodividers=”true” を設定するだけで、自動的に頭文字を割り振ってくれる機能です。
日本語もバッチリ!でした。使うときはふりがなを display:none で設定しておくと良いですよ。

実行するとこんなイメージ↓

4. その他変わったこと

スタイルシート側の変更点も多いです。

1) 表示するだけ(Read-only)のリストがフラットなスタイルになって「リンクではない」という印象が強まった。

2) controlgroups で使用しているアイコンのみのボタンがタップしにくく誤動作を招いていたため、アイコンの回りの padding を大きくし、タップしやすくなった。

3) ツールバーのボタンは mini がデフォルトに。

4) fieldcontainer で使うフォームの入力欄の右側があいていたが、端までの大きさに調整された。

5) 内部のプラグインを独立させ、必要な機能だけを使えるようになった。(カスタムダウンロード)
参考:Download Builder | jQuery Mobile(1.0アルファ版)

6) jQuery 1.8 でいくつかのコードが廃止されたことに伴って jQueryMobile1.2 + jQuery 1.8 では、Blackberry 5 と iOS 3 は対応しきれない部分がある。

7) jQuery 1.6.x はサポート対象外となった。

8) 新しいプラットフォームにも随時対応!
iOS 6、Android 4.1 (Jellybean)、Tizen(日本ではあまり使われていない)、Firefox for Android、Kindle Fire HD(電子書籍リーダー)はすでに対応済み。

9) location.href を利用したXSSに対応。
参考:Masato Kinugawa Security Blog: location.hrefの盲点
参考:jQuery Mobileのlocation.hrefのバグに起因するXSSへの対応をjQuery Mobile 1.1.1に適用したビルドを作りました – へっぽこプログラマーの日記

今まで四苦八苦しながらカスタマイズして使っていたところを、スマートに対応できるようになって嬉しいですね!



3件のコメント

  1. ポップアップは使いたい時があるな。>[jQM] jQuery Mobile 1.2.0 で追加された3つの機能(+α)をざっくりレビュー! | http://t.co/prTzS2Jb

  2. [jQM] jQuery Mobile 1.2.0 で追加された3つの機能(+α)をざっくりレビュー! http://t.co/T1LrsuMl @mekemokeさんから

  3. “[jQM] jQuery Mobile 1.2.0 で追加された3つの機能(+α)をざっくりレビュー! | @mekemoke” http://t.co/jeQl9WSeND