このページの本文へ

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

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

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

西畑一馬/to-R

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

ラジオボタン

 ラジオボタンは、スマートフォンでは非常に使いにくいフォーム部品の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>
<画像>16.jpg
jQuery Mobileにより最適化されたラジオボタン

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

サンプル17[HTML]


<fieldset data-role="controlgroup" data-type="horizontal">
<画像>17.jpg
横に並べたボタン。ただし、ボタンの数や文字数が多いと下に落ちてしまう

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

サンプル18[CSS]


.ui-controlgroup .ui-radio .ui-btn-inner{
  /*ボタンの左右の余白を25pxから15pxに変更している*/
  padding: .6em 15px;
}
<画像>18.jpg
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>
<画像>19-1.jpg,19-2.jpg
最適化したチェックボックス(左)と項目が選択された状態(右)

 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>
<画像>20.jpg
最適化したセレクトメニュー

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

サンプル21[HTML]


<select name="number" id="number" data-native-menu="false">
<画像>21-1.jpg,21-2.jpg
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>
<画像>22.jpg
multipleにより複数選択可能なカスタムメニューが作成できる
Web Professionalトップページバナー

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

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

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