このページの本文へ

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

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

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

西畑一馬/to-R

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

フォーム

 jQuery Mobileでは、さまざまなフォームUIが利用できます。最後に、jQuery MobileのフォームUIをまとめて紹介します。

テキスト入力ボックス

 jQuery MobileのフォームUIは、data-role属性「fieldcontain」を指定した要素に包んで記述します。type属性「text」のinput要素を記述すると、次のように表示されます。

サンプル11[HTML]


<div data-role="fieldcontain">
  <label for="name">名前</label>
  <input type="text" id="name">
</div>
<画像>11.jpg
jQuery Mobileのスタイルで表示された1行入力ボックス

 <input type="text">以外に、<input type="password">でも同様の入力フォームが表示されます。また、HTML5で定義されている<input type="email">や<input type="url">、<input type="tel">、<input type="number">でも同様の形状で表示されます。

検索ボックス

 HTML5で追加されたtype属性<input type="search">を使うと、虫眼鏡アイコンが付いた検索用の入力フィールドが表示されます。

サンプル12[HTML]


<div data-role="fieldcontain">
  <label for="search">検索</label>
  <input type="search" name="search" id="search" value="" />
</div>
<画像>12.jpg
type属性「search」では検索用のボックスが表示される

複数行入力ボックス(テキストエリア)

 textarea要素を利用した複数行入力ボックスも、jQuery Mobileのスタイルで表示できます。

サンプル13[HTML]


<div data-role="fieldcontain">
  <label for="contact">お問い合わせ内容</label>
  <textarea id="contact"></textarea>
</div>
<画像>13.jpg
jQuery Mobileのスタイルで表示された複数行入力ボックス

スライダー

 HTML5で追加された<input type="range">でスライダーUIを利用できます。value属性にスライダーの初期値、min属性にスライダーの最小値、max属性にスライダーの最大値を指定します。

サンプル14[HTML]


<div data-role="fieldcontain">
  <label for="year">生まれた年</label>
  <input type="range" name="year" id="year" value="1980" min="1900" max="2011" />
</div>

 サンプル14の場合、初期値が1980になり、1900~2011までの範囲で選択できるスライダーが表示されます。

<画像>14.jpg
スライダーで任意の数字が選択できる

 jQuery Mobileのスライダーは、スライダーを指で操作して選択するほか、数字を直接入力することもできます。

フリップスイッチ

 「フリップスイッチ」とは、2つの選択肢からどちらか1つをタッチ操作で選択できるUIのことです。フリップスイッチは、select要素にdata-role属性「slider」を指定すると利用でき、select要素の内側に2つのoption要素を書いて項目を指定します。

サンプル15[HTML]


<div data-role="fieldcontain">
  <label for="gender">性別</label>
  <select name="gender" id="gender" data-role="slider">
    <option value="男性">男性</option>
    <option value="女性">女性</option>
  </select> 
</div>
<画像>15-1.jpg、15-2.jpg
jQuery Mobileで利用できるフリップスイッチ。初期状態では男性(右)が選択されているがボタンをタップかフリックすることでもうひとつの選択肢である女性(左)が選択される
Web Professionalトップページバナー

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

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

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