ボタンの修正
ページとともに基本的な要素と言えるボタンは、data-*属性による記法のいくつかがCSSによる記法に置き換えられました。なおdata-cornersやdata-shadowなど、従来は指定しなくてもデフォルトで有効だったプロパティも、CSSによる記法では明示的に指定する必要がある点に注意が必要です。
| 旧記法 | 新記法 | 意味 |
|---|---|---|
| data-role="button" | class="ui-btn" | ボタンであることを表す |
| data-theme="a" | class="ui-btn-a" | テーマ指定 |
| data-corners="true" | class="ui-corner-all" | 角を丸める |
| data-shadow="true" | class="ui-shadow" | 影をつける |
| data-mini="true" | class="ui-mini" | 小さいボタン |
| data-icon="home" | class="ui-icon-home" | アイコン指定 |
| data-iconpos="right" | class="ui-btn-icon-right" | アイコン表示位置 |
| data-iconshadow="true" | class="ui-shadow-icon" | アイコンの影 |
［リスト6a］buttonの変更（buttonタグ）（変更前）
<button data-mini="true">ボタン1</button>
［リスト6b］buttonの変更（buttonタグ）（変更後）
<button class="ui-btn ui-shadow ui-corner-all ui-mini">ボタン1</button>
［リスト7a］buttonの変更（aタグ）（変更前）
<a href="#" data-role="button" data-icon="home" data-iconpos="right"> ボタン2 </a>
［リスト7b］buttonの変更（aタグ）（変更後）
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-right"> ボタン2 </a>
なお、<input type="button">形式のボタンについては従来通りdata-*属性による指定を行います。
テーマに関する修正
jQuery Mobileの従来バージョンでは「a」「b」「c」「d」「e」5種類のデフォルトテーマが存在していましたが、jQuery Mobile 1.4のデフォルトテーマは「a」（白ベース）と「b」（黒ベース）の2種類のみです。そのため「a」「b」以外のデフォルトテーマを利用していたWebサイトは、jQuery Mobile 1.4で正しく表示されません。最低限「a」か「b」のデフォルトテーマを指定する必要があります。
［リスト8a］デフォルトテーマ指定の変更（変更前）
<div data-role="page" data-theme="d">
［リスト8b］デフォルトテーマ指定の変更（変更後）
<div data-role="page" data-theme="a">
図1 jQuery Mobile 1.4で存在しないデフォルトテーマ「d」を指定すると表示が不正となる
図2 デフォルトテーマ「a」を指定することで正しい表示となる
ThemeRollerで作成したカスタムテーマを利用している場合、カスタムテーマそのものもjQuery Mobile 1.4に対応する必要があります。カスタムテーマのCSSをThemeRollerにインポートして再度ダウンロードすることで、jQuery Mobile 1.4対応テーマに変換することができます。
図3 カスタムテーマはCSSをThemeRollerにインポートしてjQuery Mobile 1.4対応に変換
