jQueryMobile 1.2の主な変更点を簡単に

• http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/

詳細は読んでいただくとして、気になったところをメモしておこうかなと思いますよ。

新しいポップアップウィジェット

ポップアップのウィジェットが追加されたようです。
このポップアップウィジェットによってオーバーレイする表現が簡単に実現出来るようになったようです。ツールチップ、ポップアップメニュー、ポップアップフォーム、マップ、画像が簡単に実現出来るようですね。
マークアップ方法は、ダイアログとほぼ同じで。data-role="popup"と指定し、表示するには、アンカータグかボタンタグに、data-rel="popup"と設定します。

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup.<p>
</div>

Collapsibleリスト

Collapsible contentは以前のバージョンであって、その中にListViewを組み込むことが出来ました。
1.2からはListViewでCollapsibleを表現出来るようになったようです。

<div data-role="collapsible"></div>

の中にListViewを組み込めばいいようです。
さらに、グルーピングしたい場合は、

<div data-role="collapsible-set"></div>

の中に入れればいいようですね。
data-insetオプションはデフォルトtrueですが、falseを設定すれば、図の様になります。
また、data-collapsed-iconとdata-expanded-iconで閉じてる時、開いてる時のアイコンをそれぞれ設定出来るみたいです。

<div data-role="collapsible" data-theme="b" data-content-theme="c">
  <h2>Choose a car model...</h2>
  <ul data-role="listview">
    <li>hogehoge</li>
    <li>fugafuga</li>
  </ul>
</div>

自動分割のListView

ListViewにdata-autodividersオプションが追加されて、list-dividerを勝手につけてくれるようになったようです。
ListViewの要素の頭文字でしか分割できないのかな？

<ul data-role="listview" data-autodividers="true">
  <li>Abe</li>
  <li>Ato</li>
  <li>Bando</li>
</ul>

ListViewのフラットビジュアルスタイル

以前までは、ListViewのli要素の中にアンカータグが無い場合でも立体感のあるグラデーションがついていましたが、立体感の無いものになったようです。

コントロールグループアイコンボタン

以前までは、小さくてタップしにくかったのですが、大きくなったようです。また、data-miniオプションで小さく出来るようです。

ライブラリとか

jQuery1.8がサポートされたようです。
jQuery1.6がサポートからはずれたようです。

jQuery Mobileパーフェクトガイド 基本からデザインカスタマイズ、パフォーマンスアップまで

すべての人に知っておいてほしい jQuery & jQuery Mobileの基本原則