jQueryMobileのグリッドレイアウト
jQuery Mobileではスマホ向けにグリッドレイアウトという機能が用意されています。
グリッドレイアウトは均等な列を表示する機能です。2カラムを表示したい場合はdiv要素のclass属性にui-grid-aを指定します。
その中のdiv要素(2つ)にそれぞれのclass属性にui-block-a,ui-block-bを指定します。

<div data-role="content">
  <div class="ui-grid-a">
    <div class="ui-block-a" style="border:1px solid;"><p>1カラム目</p></div>
    <div class="ui-block-b" style="border:1px solid;"><p>2カラム目</p></div>
  </div>
</div>


3カラムを表示したい場合はdiv要素のclass属性にui-grid-bを指定します。
その中のdiv要素(3つ)にそれぞれのclass属性にui-block-a,ui-block-b,ui-block-cを指定します。

4カラムを表示したい場合はdiv要素のclass属性にui-grid-cを指定します。
その中のdiv要素(4つ)にそれぞれのclass属性にui-block-a,ui-block-b,ui-block-c,ui-block-dを指定します。

5カラムを表示したい場合はdiv要素のclass属性にui-grid-dを指定します。
その中のdiv要素(4つ)にそれぞれのclass属性にui-block-a,ui-block-b,ui-block-c,ui-block-d,ui-block-eを指定します。

5カラム目までは対応しています。グリッドレイアウトのDEMOです。

jQueryMobileのグリッドレイアウト複数行
jQuery Mobileのグリッドレイアウトは複数行表示することもできます。
2行2列のグリッドレイアウトにしたい場合はdiv要素のclass属性にui-grid-aを指定し、その中のdiv要素(4つ)にそれぞれのclass属性にui-block-a,ui-block-b,ui-block-a,ui-block-bを指定します。

<div data-role="content">
  <div class="ui-grid-a">
    <div class="ui-block-a" style="border:1px solid;"><p>1行1カラム目</p></div>
    <div class="ui-block-b" style="border:1px solid;"><p>1行2カラム目</p></div>
    <div class="ui-block-a" style="border:1px solid;"><p>2行1カラム目</p></div>
    <div class="ui-block-b" style="border:1px solid;"><p>2行2カラム目</p></div>
  </div>
</div>


グリッドレイアウト複数行のDEMOです。

Back to top

Information