ネイティブフォームの利用
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も最適化して表示できます。
■サンプル24[HTML]
<input type="button" value="キャンセル">
<input type="submit" value="送信">
サンプル24はタッチ操作で押しやすい大きなボタンで表示されます。
ボタンのデザインは、data-theme属性でテーマを反映できます。
■サンプル25[HTML]
<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="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デザイン入門」(アスキー・メディアワークス刊)がある。