jQuery Mobile 1.3.0 Betaがリリース！変更点まとめ
先日ついにjQuery Mobile 1.3.0 Betaのリリースがありました！
Announcing jQuery Mobile 1.3.0 Beta
http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/
ここでは、jQuery Mobile 1.3の変更点を簡単にまとめたいと思います。
画面のサンプルやAPIなどについては、本家のBlogポストもしくはDocsを参照してください。
jQuery Mobile 1.3では、従来の予告通りResponsive Web Designにフォーカスしたアップデートになりました。Widgetの大きさにwidth: 100%などの指定をするように変更されており、画面サイズやグリッドなどにフレキシブルになるように設計されています。
これまでは、jQuery MobileかResponsive Web Designかを選択するような形に（結果的に）なっていましたが、1.3からはタブレット、デスクトップでも利用できるように配慮されています。また今後のアップデートでは、jQuery UIとの統合が図られるため、ますますその傾向は強くなります。
1.3で追加されたいくつかの機能は、Responsive Web Designの要であるMedia Queriesを利用する形となっていますが、この設定をスクリプトで記述することは難しいため、デフォルトでは多くのケースで望ましいと思われるサイズを決め打ちしています。そのため、個々のサイトに合わせてブレークポイントをカスタマイズする場合には、ui-responsive関連のCSSスタイルを自分で上書きする必要があります。
以降は、個々の機能について列挙していきます。
- Panelウィジットの追加
Panelでは、Facebookでつかれているような出し入れ可能なサイドパネルが実装できます。
上下左右からメニューや任意のページなどをアニメーションをつけて表示することができます。
<div data-role="panel">などで作成できます。
Demo&Docs&API
http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html
http://stage.api.jquerymobile.com/panel/
- Responsive Tableの追加
画面が小さくなるとテーブルの形を変えるResponsive Tableが追加されました。
Responsive Tableには、以下の2つのモードが用意されています。
- Reflow mode
横方向に伸びているテーブルを縦方向に伸ばして表示します。
<table data-role="table">などで作成できます。
Docs&API
http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-reflow.html
http://stage.api.jquerymobile.com/table-reflow/
- Column toggle mode
1度に表示するカラム数を制限し、設定ボタンで任意に表示するカラムを選択することができます。
<table data-role="table" data-mode="columntoggle">などで作成できます。
Docs&API
http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-column-toggle.html
http://stage.api.jquerymobile.com/table-columntoggle/
- Dual handle range sliderの追加
つまみが2つあるスライダーが追加されました。
開始と終了を設定することができます。
<div data-role="rangeslider">で2つのスライダーを囲むと作成できます。
Demo&API
http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/sliders/rangeslider.html
http://stage.api.jquerymobile.com/rangeslider/
- Responsive Gridの追加
従来のグリッドレイアウトの仕組みに、Responsiveな設定が追加されました。
画面サイズが小さくなると1カラムになるようになっています。デフォルトの
ブレークポイントは、560px (35em)以下です。次のようにui-grid-*を指定する要素に
併せてui-responsiveクラスを追加するだけです。
<div class="ui-grid-b ui-responsive">
自分でブレークポイントを設定する場合は、Docsにサンプルがあります。
Docs&API
http://jquerymobile.com/demos/1.3.0-beta.1/docs/content/content-grids-responsive.html
http://stage.api.jquerymobile.com/grid-layout/
その他の変更点
- 新たにhashchangeイベントとpopstateイベントを統合したNavigateイベントが追加されました。
また、history APIを簡単に扱うためのメソッドとして、$.mobile.navigateが追加されています。
http://stage.api.jquerymobile.com/navigate/
http://stage.api.jquerymobile.com/jQuery.mobile.navigate/
- リストビューのfilter機能をうまく利用したAutocomplete機能が追加されました。
単純にリストを非表示にしておき、フィルターに引っかかったものだけを表示して、あたかもAutocompleteしているかのように見せます。サンプルではAjaxを使った方法も記載されています。リストにdata-filter-reveal="true"の設定を追加します。
http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/listviews/listview-filter-reveal.html
http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/listviews/listview-filter-autocomplete.html
- ダイアログの閉じるボタンの表示位置をカスタマイズできるようになりました。data-close-btn属性に"right"、"left"、"none"が指定できます。
- ポップアップウィジットでポップアップの外の部分をタッチした際にポップアップを閉じないようにできるようになりました。data-dismissible="false"で設定できます。
- テキスト系の入力フォームにデリートボタンを任意に追加することができるようになりました。data-clear-btn="true"で設定できます。
- fileインプットをサポートしました。
- カスタムセレクトメニューのoptgroup要素に任意のテーマが指定できるようになりました。また、ヘッダー内に配置した際に左右へ表示できるようになりました。data-divider-themeでテーマを、classにui-btn-right、ui-btn-leftでヘッダー内に配置した際の位置を指定できます。
- ボタンのテーマをスクリプトから変更できるようになりました。（_setOptionを利用します。）
- 折りたたみ可能ブロックにdata-corners（角丸の設定）が追加されました。
- 固定ツールバーは、現在はposition:fixedをサポートしていないブラウザは対象外ですが、Download Builderツールにて、旧ブラウザをサポートするための設定が追加されました。fixedToolbar.workarounds.jsを選択すれば、Android 2.xやiOS 4でも固定ツールバーを利用できます。
- 新たなアイコンとして、menuとeditが追加されました。
- Swipeイベントの判定ロジックなどをカスタマイズできるようになりました。（$.event.special.swipe.handleSwipeなどのfunctionを上書きする）
- 新しいAPIドキュメントが採用されました。（http://stage.api.jquerymobile.com/category/widgets/）
- jQuery 1.9、2.0をサポートしました。
- ページ遷移のアニメーションがIE10/WP8に対応しました。
