jQuery Mobile グリッド

jQuery Mobile レイアウトグリッド

jQuery MobileはCSSベースの列レイアウトを提供しています。ただし、モバイルデバイス上で列レイアウトを使用することは推奨されません。これは、モバイルデバイスのスクリーン幅の制限によるものです。

しかし、時にはボタンやナビゲーションバーなどの小さな要素を配置する必要がある場合があります。例えば、テーブルのように並べて配置する場合。その場合、列レイアウトは非常に適切です。

グリッドの列は等幅です（合計幅は100%）、境界線、背景、マージンまたはインセットはありません。

使用できるレイアウトグリッドは4種類あります：

グリッドクラス 列 列幅 対応 例
ui-grid-a 2 50% / 50% ui-block-a|b テスト
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c テスト
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d テスト
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e テスト

ヒント：列コンテナ内では、異なる列数に応じて、子要素に ui-block-a|b|c|d|e クラスを設定できます。これらの列は並行してフロートします。

例 1: ui-grid-a クラス（2列レイアウト）に対して、2つのサブ要素 ui-block-a、ui-block-b を指定する必要があります。

例 2: ui-grid-b クラス（3列レイアウト）に対して、3つのサブ要素 ui-block-a、ui-block-b、ui-block-c を追加してください。

グリッドのカスタマイズ

CSSを使用して列ブロックをカスタマイズできます：

例

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

自分で試してみる

行内スタイルを使用してブロックをカスタマイズすることもできます：

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

複数行

列に複数の行を含めることも可能です。

注釈：ui-block-a-class は常に新しい行を作成します：

例

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

自分で試してみる