このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第7回

サンプルで学ぶjQuery Mobileまとめ(後編)

2011年08月19日 13時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

ネイティブフォームの利用

 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>
<画像>23.jpg
jQuery MobileのフォームUIではなくブラウザーのUIが表示される

ボタンの装飾

 jQuery Mobileでは、送信ボタンなどのUIも最適化して表示できます。

サンプル24[HTML]


<input type="button" value="キャンセル">
<input type="submit" value="送信">

 サンプル24はタッチ操作で押しやすい大きなボタンで表示されます。

<画像>24.jpg
jQuery Mobileにより最適化されたボタン

 ボタンのデザインは、data-theme属性でテーマを反映できます。

サンプル25[HTML]


<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="b">
<画像>25.jpg
デザインテーマ「b」を適用させたボタン

 ボタンは通常、幅いっぱいで表示されますが、data-inline属性「true」を指定すると文字サイズにフィットしたボタンになります。

サンプル26[HTML]


<input type="button" value="キャンセル" data-inline="true">
<input type="submit" value="送信" data-inline="true">
<画像>21.jpg
文字サイズにフィットさせたボタン

 ボタンにはdata-icon属性でアイコンも付けられます。

サンプル27[HTML]


<input type="button" value="キャンセル" data-icon="delete">
<input type="submit" value="送信" data-icon="arrow-r">
<画像>27.jpg
キャンセルボタンに×アイコンを、送信ボタンに右矢印のアイコンをつけたボタン

 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"
<画像>28.jpg
ボタンで利用できる各種アイコン

 アイコンの表示位置は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>
<画像>29.jpg
アイコンの位置を変更できる

 以上でjQuery Mobileの基本的な使い方の解説は終了です。次回は、jQuery Mobileを使った本格的なスマートフォンサイトの作り方を解説します。


著者:西畑一馬(にしはた かずま)

著者写真

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「Web制作の現場で使う jQueryデザイン入門」(アスキー・メディアワークス刊)がある。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く