ネイティブフォームの利用
jQuery Mobileは、すべてのフォーム部品を独自のUIに最適化して表示しますが、場合によってはブラウザーのデフォルトのUIを利用したいときもあるでしょう。data-role属性「none」を指定すると、ブラウザーのデフォルトのUIで表示されます。
■サンプル23[HTML]
<div data-role="fieldcontain">
<label for="name">名前</label>
<input type="text" id="name" data-role="none">
</div>
jQuery MobileのフォームUIではなくブラウザーのUIが表示される
ボタンの装飾
jQuery Mobileでは、送信ボタンなどのUIも最適化して表示できます。
■サンプル24[HTML]
<input type="button" value="キャンセル">
<input type="submit" value="送信">
サンプル24はタッチ操作で押しやすい大きなボタンで表示されます。
jQuery Mobileにより最適化されたボタン
ボタンのデザインは、data-theme属性でテーマを反映できます。
■サンプル25[HTML]
<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="b">
デザインテーマ「b」を適用させたボタン
ボタンは通常、幅いっぱいで表示されますが、data-inline属性「true」を指定すると文字サイズにフィットしたボタンになります。
■サンプル26[HTML]
<input type="button" value="キャンセル" data-inline="true">
<input type="submit" value="送信" data-inline="true">
文字サイズにフィットさせたボタン
ボタンにはdata-icon属性でアイコンも付けられます。
■サンプル27[HTML]
<input type="button" value="キャンセル" data-icon="delete">
<input type="submit" value="送信" data-icon="arrow-r">
キャンセルボタンに×アイコンを、送信ボタンに右矢印のアイコンをつけたボタン
data-icon属性には次のようなアイコンを利用できます（サンプル28）。
| 左向き矢印 | data-icon="arrow-l" |
| 右向き矢印 | data-icon="arrow-r" |
| 上向き矢印 | data-icon="arrow-u" |
| 下向き矢印 | data-icon="arrow-d" |
| ×(バツ) | data-icon="delete" |
| ＋（プラス） | data-icon="plus" |
| -（マイナス） | data-icon="minus" |
| チェック | data-icon="check" |
| 歯車 | data-icon="gear" |
| リフレッシュ | data-icon="refresh" |
| 進む | data-icon="forward" |
| 戻る | data-icon="back" |
| テーブル状 | data-icon="grid" |
| 星 | data-icon="star" |
| i(情報) | data-icon="info" |
| 家 | data-icon="home" |
| 虫眼鏡 | data-icon="search" |
ボタンで利用できる各種アイコン
アイコンの表示位置はdata-iconpos属性で変更できます。値には、right（右）、left（左）、top（上）、bottom（下）を指定します。
■サンプル29[HTML]
<button data-icon="star" data-iconpos="top"> data-iconpos="top"</button>
<button data-icon="star" data-iconpos="bottom"> data-iconpos="bottom"</button>
<button data-icon="star" data-iconpos="left"> data-iconpos="left"</button>
<button data-icon="star" data-iconpos="right"> data-iconpos="right"</button>
アイコンの位置を変更できる
◆
以上でjQuery Mobileの基本的な使い方の解説は終了です。次回は、jQuery Mobileを使った本格的なスマートフォンサイトの作り方を解説します。
著者：西畑一馬（にしはた かずま）
to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」（アスキー・メディアワークス刊）がある。
