jQuery モバイルページでの ui-grid グリッドレイアウトの使用の詳細な説明development

jQuery モバイルページでの ui-grid グリッドレイアウトの使用の詳細な説明development_jquery

WBOY

リリース： 2016-05-16 15:27:39

オリジナル

1786 人が閲覧しました

モバイルデバイスでは画面幅が狭いため、通常は複数列のレイアウトは使用されませんが、場合によっては、小さな要素 (ボタンや並べて表示されるナビゲーションラベルなど) を複数の列に配置する必要がある場合があります。。 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 -->

ログイン後にコピー

上記のタグは、次のコンテンツレイアウトを生成します:

2015123162840041.jpg (828×100)

ご覧のとおり、デフォルトではグリッドには視覚的なスタイルがありません。コンテンツを並べて表示するだけです。

グリッドクラスは任意のコンテナに適用できます。次の例では、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>

ログイン後にコピー

2015123162902752.jpg (831×97)

このフレームワークでは、グリッド内のボタンに左右のマージンが追加されることに注意してください。単一のボタンの場合は、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>

ログイン後にコピー

2015123162921932.jpg (821×138)

テーマシステムのテーマクラス (データテーマ属性なし) を、グリッドなどの要素に追加できます。次のブロックでは、デフォルトのバーを追加する ui-bar と、背景のグラデーションとフォントスタイルを「E」ツールバーテーマサンプルに適用する ui-bar-e の 2 つのクラスを追加しました。説明のために、各標準の高さを設定するために、インライン style="height:120px" 属性も各グリッドに追加されます。

2015123162939675.jpg (816×148)

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% のグリッドレイアウトが生成されます

2015123162955517.jpg (827×293)

ui-block-c 4 列レイアウト

4 列の行 (25/25/25/25% グリッド) は、親コンテナーで class=ui-grid-c を指定し、クォーターブロックを追加することで実現されます。注: これらのブロックはテーマコースと同じスタイルで、グリッドレイアウトがはっきりと表示されます

2015123163016861.jpg (834×159)

ui-block-c 5 列レイアウト

1 行 5 列、20/20/20/20/20% グリッドは、親コンテナーの class= ui-grid-d
で指定されます

2015123163036328.jpg (831×161)

複数行および複数列のレイアウト

グリッドデザインはアイテムを複数の行にラップします。たとえば、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>

ログイン後にコピー

2015123163102847.jpg (827×462)

<!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>

ログイン後にコピー

2015123163121080.jpg (785×211)