ラジオボタン

　ラジオボタンは、スマートフォンでは非常に使いにくいフォーム部品の1つですが、jQuery Mobileを使うと指で選択しやすい形状に最適化できます。type属性に「check」を指定したinput要素をそれぞれlabel要素で関連付けし、data-role属性「controlgroup」を指定したfiledset要素で包みます。filedset要素の冒頭にはlegend要素で項目名を指定します。

■サンプル16[HTML]

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>購入回数</legend>
    <input type="radio" name="number" id="n1" value="1回" checked="checked" />
    <label for="n1">1回</label>
    <input type="radio" name="number" id="n2" value="2回" />
    <label for="n2">2回</label>
    <input type="radio" name="number" id="n3" value="3回" />
    <label for="n3">3回</label>
    <input type="radio" name="number" id="n4" value="4回" />
    <label for="n4">4回以上</label>
  </fieldset>
</div>

jQuery Mobileにより最適化されたラジオボタン

　ラジオボタンはデフォルトでは縦に表示されますが、fieldset要素にdata-type属性「horizontal」を指定すると、横（水平方向）に並んだボタンにもできます。

■サンプル17[HTML]

<fieldset data-role="controlgroup" data-type="horizontal">

横に並べたボタン。ただし、ボタンの数や文字数が多いと下に落ちてしまう

　ボタンが1行に収まらない場合は、次のようにCSSで余白を調整すると収められます。

■サンプル18[CSS]

.ui-controlgroup .ui-radio .ui-btn-inner{
  /*ボタンの左右の余白を25pxから15pxに変更している*/
  padding: .6em 15px;
}

CSSで1行に収まるように調整した状態

　ただし、スマートフォンでは上下移動のストレスは少ないので、無理に横方向に並べる必要はありません。特に理由がなければ、縦方向に並べればよいでしょう。

チェックボックス

　jQuery Mobileではチェックボックスも使いやすいUIで表示できます。基本的な使い方はラジオボタンと同じです。

■サンプル19[HTML]

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>お問い合わせ種別</legend> 
    <input type="checkbox" name="type1" id="type1" value="HP新規作成"> 
    <label for="type1">HP新規作成</label> 
    <input type="checkbox" name="type2" id="type2" value="HPリニューアル">
    <label for="type2">HPリニューアル</label> 
    <input type="checkbox" name="type3" id="type3" value="システム開発"> 
    <label for="type3">システム開発</label> 
    <input type="checkbox" name="type4" id="type4" value="コンサルティング"> 
    <label for="type4">コンサルティング</label>
  </fieldset>
</div>

最適化したチェックボックス(左)と項目が選択された状態(右)

　fieldset要素にdata-type属性「horizontal」を指定すると、ラジオボタンと同様、横並びにできます。

セレクトメニュー

　select要素を使ったセレクトメニューの最適化も簡単です。特に、Androidのブラウザではセレクトメニューが非常に小さいので、jQuery Mobileで最適化することでユーザビリティーを向上できます。

■サンプル20[HTML]

<div data-role="fieldcontain">
  <label for="number">購入回数</label>
  <select name="number" id="number">
    <option value="">選択してください</option>
    <option value="n1">1回</option>
    <option value="n2">2回</option>
    <option value="n3">3回</option>
    <option value="n4">4回以上</option>
  </select>
</div>

最適化したセレクトメニュー

　さらに、jQuery Mobile独自のカスタムセレクトメニューも利用できます。カスタムセレクトメニューを利用するには、select要素にdata-native-menu属性「false」を指定します。

■サンプル21[HTML]

<select name="number" id="number" data-native-menu="false">

jQuery Mobileのカスタムセレクトメニュー、ボタンをタップするとメニューが表示されるようになる

　カスタムセレクトメニューでは、option要素のvalue属性の値が空／option要素の中にテキストがない／data-pleceholder属性に「true」が指定されている、のいずれのかの場合、その項目が見出しとして機能します。サンプル21では、最初のoption要素である「<option value="">選択してください</option>」が見出しとなり、項目としては選択できません。

　カスタムセレクトメニューでは、multiple属性による複数選択も設定できます（サンプル22）。

■サンプル22[HTML]

<div data-role="fieldcontain">
  <label for="type">お問い合わせ種別</label>
  <select name="type" id="type" multiple="multiple" data-native-menu="false">
    <option value="">選択してください</option>
    <option value="HP新規作成">HP新規作成</option>
    <option value="HPリニューアル">HPリニューアル</option>
    <option value="システム開発">システム開発</option>
    <option value="コンサルティング">コンサルティング</option>
  </select>
</div>

multipleにより複数選択可能なカスタムメニューが作成できる

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

　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を使った本格的なスマートフォンサイトの作り方を解説します。