ホームページ > 記事 > ウェブフロントエンド > jQuery モバイル ページでの ui-grid グリッド レイアウトの使用の詳細な説明development_jquery
jQuery モバイル ページでの ui-grid グリッド レイアウトの使用の詳細な説明development_jquery
- WBOYオリジナル
- 2016-05-16 15:27:391739ブラウズ
モバイル デバイスでは画面幅が狭いため、通常は複数列のレイアウトは使用されませんが、場合によっては、小さな要素 (ボタンや並べて表示されるナビゲーション ラベルなど) を複数の列に配置する必要がある場合があります。 。 Jquery Mobile フレームワークは、ui-grid
と呼ばれる CSS ベースの列レイアウトを構築する簡単な方法を提供します。Jquery Mobile には、列が必要なあらゆる状況で使用できる 4 つのプリセット レイアウトが用意されています
- 2 つの列 (ui-grid-a クラスを使用)
- 3 列 (ui-grid-b クラスを使用)
- 4 列 (ui-grid-c クラスを使用)
- 5 列 (ui-grid-d クラスを使用)
グリッドは幅 100%、完全に非表示 (境界線や背景なし)、マージンやパディングがないため、グリッド内に配置された要素のスタイルを妨げません。グリッド コンテナでは、子要素に ui-block-a / b / c / d が連続的に割り当てられ、各「block」要素が浮動して並置され、グリッドを形成します。 ui-block-a クラスは基本的にフロートをクリアし、新しい行を開始します (以下の複数行グリッドを参照)。
ui-grid-2 列レイアウト
2 列 (50 / 50%) レイアウトを作成します。ui-grid-a 属性を最初のレイヤー (親コンテナー) に追加し、ui-block-a と ui-block を 2 番目のレイヤー (2 つ) に追加します。サブコンテナ) -b：
<div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> </div><!-- /grid-a -->
上記のタグは、次のコンテンツ レイアウトを生成します:
ご覧のとおり、デフォルトではグリッドには視覚的なスタイルがありません。コンテンツを並べて表示するだけです。
グリッド クラスは任意のコンテナに適用できます。次の例では、ui-grid-a を追加し、ui-block を適用し、両方のボタンを画面幅の 50% まで拡張します
<fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div> </fieldset>
このフレームワークでは、グリッド内のボタンに左右のマージンが追加されることに注意してください。単一のボタンの場合は、div の以下の例のように、クラス ui-grid-solo とボタン クラス ui-block-a を使用できます。このようなボタンには同じマージンが与えられます
<div class="ui-grid-a"> <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div> <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div> </div> <div class="ui-grid-solo"> <div class="ui-block-a"><button type="v" data-theme="b">More</button></div> </div>
テーマ システムのテーマ クラス (データ テーマ属性なし) を、グリッドなどの要素に追加できます。次のブロックでは、デフォルトのバーを追加する ui-bar と、背景のグラデーションとフォント スタイルを「E」ツールバー テーマ サンプルに適用する ui-bar-e の 2 つのクラスを追加しました。説明のために、各標準の高さを設定するために、インライン style="height:120px" 属性も各グリッドに追加されます。
ui-block-b 3 列レイアウト
グリッド レイアウト構成では、親コンテナー要素と 3 つの子コンテナー要素で class=ui-grid-b を使用し、それぞれにそれぞれの ui-block-a/a/c クラスがあり、1 行 3 列のレイアウト (33/ 33) を作成します。 /33%)。注: これらのブロックはコースと同じスタイル テーマを共有しており、グリッド レイアウトが明確に表示されます。
<div class="ui-grid-b"> <div class="ui-block-a">Block A</div> <div class="ui-block-b">Block B</div> <div class="ui-block-c">Block C</div> </div><!-- /grid-b -->
これにより、コンテンツの 33 / 33 / 33% のグリッド レイアウトが生成されます
ui-block-c 4 列レイアウト
4 列の行 (25/25/25/25% グリッド) は、親コンテナーで class=ui-grid-c を指定し、クォーター ブロックを追加することで実現されます。注: これらのブロックはテーマ コースと同じスタイルで、グリッド レイアウトがはっきりと表示されます
ui-block-c 5 列レイアウト
1 行 5 列、20/20/20/20/20% グリッドは、親コンテナーの class= ui-grid-d
で指定されます
複数行および複数列のレイアウト
グリッド デザインはアイテムを複数の行にラップします。たとえば、9 つのサブブロックを持つコンテナーで 3 行 3 列のグリッド (ui-grid-b) を指定すると、それぞれ 3 項目の 3 行に交換されます。 CSS ルールをフロートに対してクリアし、class=ui-block-a のときに新しい行を開始することで、割り当てられたブロック (A、B、C、A、B、C など) の繰り返しシーケンスがグリッド タイプにマッピングされるようにします。 。各行の最初のコンテナを class=ui-block-a に設定して float をクリアすると、9 つのサブコンテナのクラスは次のようになります。 class=ui-block-(a,b,c,a,b 、c、a、b、c）。
<div id="grid" class="ui-grid-b"> <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div> <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div> <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div> </div>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>grid-layout demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- The script below can be omitted --> <script src="/resources/turnOffPushState.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Grid Layout Example</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div> </div><!-- /grid-a --> </div> </div> </body> </html>
