CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

kida

jQuery Mobile 1.1リリース

by kida on

先日、正式版が公開されてから最初の大きなバージョンアップを迎え、jQuery Mobile 1.1.0がリリースとなりました。
(公式サイトの情報はこちら(英語))

今回はjQuery Mobile 1.1になって何が変わったのかをご紹介したいと思います。

画面遷移の改善

画面が遷移するときなどにスライドしたりポップアップするなどのアニメーションの動作が以前より高速かつスムーズになるよう改善されています。
また、画面遷移のアニメーション効果に、「Turn」と「Flow」が追加されています。
公式デモサイトで動作確認ができますので、こちらをご覧下さい。

Ajaxローダのデザイン変更

「よりロードが速く感じる」デザインに変更されました。
それに合わせて、ローディングメッセージを表示させるかどうかのオプションや、
メッセージをメソッド呼び出しのその場で引数として指定できる機能も加えられました。
こちらも公式デモサイトで動作確認ができますので、こちらをご覧下さい。

固定ツールバーの変更

ページ上部によく設定される固定ツールバーですが、jQuery Mobile 1.0時点では実装にスクリプトによる動的なものを使用していました。
ですが、スクロールする度にツールバーが消えたり等不具合がありました。

今回はそれをスクリプトではなく、 position:fixedを使用するように変更したそうです。
以前は実用的なサポートがほとんどされていなかった position:fixedですが、最近は各ブラウザの対応状況が良くなっています。
スクロールする度に逐一消えていたツールバーも、表示されたままで自然な感じになっています。

この新固定ツールバーが動作するのは、以下のブラウザです。

  • iOS5 – iPhone and iPad
  • Android 2.2 and 2.3
  • Android 3.x tablets (Honeycomb)
  • Android 4.x (ICS)
  • Chrome for Android (beta)
  • BB Playbook 1-2
  • BB7
  • Nook Color/Tablet
  • Kindle Fire
  • Kindle 3
  • All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)

上記以外の環境では、固定ツールバーとして設定しても、通常のページと一緒にスクロールされる形になるようです。

jQuery 1.7.1への対応

jQuery 1.7.1に対応するようになりました。

TouchOverflow機能の廃止

TouchOverflow機能が廃止となりました。iOS5以外ではサポートが進まなかった上、そこでの実装もバグが多く発生しており、メンテナンスの手間が大変なのが理由とのことです。

ページ切り替え効果のFirefoxサポート

-moz系の記述が入り、FFでもページ切り替え効果が動作するようになりました。

ミニフォームの実装

従来の拡張オブジェクトではレイアウトに入れるのが難しい場合もありましたので、新たにミニ版がつくられました。
これを使うには、要素に対して以下のように指定します。

data-mini="true"

実際に従来のものとどれくらい異なるのかは、以下2つを見比べてみて下さい。
従来のフォーム
ミニ版フォーム

スライダーにハイライト機能の追加

スライダーの左側に色をつける「ハイライト」機能が追加されました。確かに、直観的に大きさが分かりやすいかもしれません。
この機能を有効にするには、要素に対して以下のように指定します。

data-highlight="true"

こちらも公式デモサイトで動作確認ができますので、こちらをご覧下さい。

スライダーにステップ指定機能追加

HTML5のrange要素には既にある、step属性の指定が可能になりました。デフォルトは1ですが、以下のように指定すれば、25おきにしか数値指定できなくなります。

step="25"

こちらも公式デモサイトで動作確認ができますので、こちらをご覧下さい。

data-enhance=”false”属性

フレームワークが自動的に全てのマークアップを拡張してしまうため、サードパーティ製のウィジェットやライブラリで用意された要素にも自動的に拡張され、意図した動作やデザインが上書きされてしまう問題がありました。
それを解決するため、要素に対して以下のように指定されている場合には自動初期化処理が行われない仕様になりました。

data-enhance="false"

その他

現在、jQuery Mobileの必要な機能だけを選択してダウンロード可能にする「Custom Download Builder」の開発が進んでいるそうです。

バージョンアップを振り返って・・・

jQuery Mobile 1.1は1.0の最適化を進めたバージョンになっているようです。
年始に予告されていたロードマップですと、もうすぐjQuery Mobile 1.2も登場するようですので、
まだまだjQuery Mobileから目が離せません。

Subscribe:
pagetop