jQueryMobileのチェックボックス
jQuery Mobileでチェックボックスを表示します。
まず、一つずつ表示する方法です。

<div data-role="content">
  <label for="id1">サンプル1</label>
  <input type="radio" name="number" id="id1" />
  <label for="id2">サンプル2</label>
  <input type="radio" name="number" id="id2" />
</div>


チェックボックスのDEMOです。

jQueryMobileのチェックボックスのUI
普通、チェックボックスは複数あります。上記のように表示すると、チェックボックスに間ができてしまっています。
チェックボックスをきれいに表示するには、fieldset data-role=data-role="controlgroup"で囲みます。

<fieldset data-role="controlgroup">
  <label for="id1">サンプル1</label>
  <input type="checkbox" name="number" id="id1" />
  <label for="id2">サンプル2</label>
  <input type="checkbox" name="number" id="id2" />
</fieldset>


以下、チェックボックスをfieldsetで囲んだDEMOです。

jQueryMobileのチェックボックスを横に並べる
チェックボックスを横に並べるにはdata-type="horizontal"を指定します。

<fieldset data-role="controlgroup" data-type="horizontal">
  <label for="id1">サンプル1</label>
  <input type="checkbox" name="number" id="id1" />
  <label for="id2">サンプル2</label>
  <input type="checkbox" name="number" id="id2" />
</fieldset>


以下、チェックボックスを横に並べたDEMOです。

jQueryMobileのチェックボックスをグリッドレイアウトと併用する
グリッドレイアウトと併用することによって2列表示のチェックボックスや3列表示にしたりすることができます。

<div data-role="content">
   <div class="ui-grid-a">
    <div class="ui-block-a">
    <fieldset data-role="controlgroup">
      <label for="id1">サンプル1</label>
      <input type="checkbox" name="number" id="id1" />
      <label for="id2">サンプル2</label>
      <input type="checkbox" name="number" id="id2" />
      </fieldset>
    </div>
    <div class="ui-block-b">
    <fieldset data-role="controlgroup">
      <label for="id3">サンプル3</label>
      <input type="checkbox" name="number" id="id3" />
      <label for="id4">サンプル4</label>
      <input type="checkbox" name="number" id="id4" />
      </fieldset>
    </div>
  </div>
</div>



以下、グリッドレイアウトと併用してデザインしたDEMOです。

Back to top

Information