igLayoutManager の構成

トピックの概要

目的

このトピックでは、igLayoutManger® コントロールがサポートする別のレイアウトを設定する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

• igLayoutManager の概要: このトピックでは、igLayoutManager コントロールの概念について説明し、サポートされているレイアウトやその使用についての情報を提供します。

• igLayoutManager の追加: このトピックではコード例を使用して、HTML 単体、JavaScript または ASP.MVC 実装のいずれかで igLayoutManager コントロールを HTML ページに追加する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• レイアウトの指定
  • 概要
  • プロパティ設定
• 各レイアウトの構成
  • 各レイアウトの構成の概要
  • 各レイアウトの構成の概要表
• 境界線レイアウトの構成
  • 概要
  • プロパティ設定
  • 例
• 列レイアウトの構成
  • 概要
  • 最低必要条件
  • 例
• フロー レイアウトの構成
  • 概要
  • プロパティ設定
  • 例
• グリッド レイアウトの構成
  • 概要
  • プロパティ設定
  • 例
• 垂直レイアウトの構成
  • 概要
  • プロパティ設定
  • 例
• 関連コンテンツ
  • トピック
  • サンプル

レイアウトの指定

概要

igLayoutManager コントロールは、複数のレイアウトをサポートします。各レイアウトの概要およびその外観については、igLayoutManager レイアウトの概要表を参照してください。レイアウトは、igLayoutManager の layoutMode プロパティを設定して指定します。ただし、列のレイアウトは、HTML マークアップから構成します (列レイアウトの構成を参照)。このプロパティの有効な設定は、プロパティ設定を参照してください。

プロパティ設定

以下の表は、igLayoutManager コントロールの layoutMode プロパティの有効な設定を示しています。

各レイアウトの構成

各レイアウトの構成の概要

各レイアウトはそれぞれ異なるレベルでカスタマイズできます。レイアウトによっては、異なるサイズの項目を定義でき、流動的でレスポンシブなデザインが特徴です。また、レイアウトを正しく動作させるために最低限必要な構成設定は、レイアウトによって異なります。

各レイアウトの構成の概要表

以下の表で、igLayoutManager コントロールの構成可能な要素を簡単に説明し、構成に使用するプロパティにマップします。詳細は、表の後に記載されています。

境界線レイアウトの構成

概要

境界線レイアウトは、コントロールの layoutMode プロパティにより構成できます。コントロールのホスト HTML 要素は、<div> です。子の <div> 要素はホスト要素の HTML マークアップで定義でき、初期化時に、コントロールがそれぞれの HTML 要素と CSS クラスを追加します。

項目は、各領域のそれぞれのクラスによって配置します。タイル マネージャーは、クラスの名前を使用して領域を特定し、項目の位置を合わせます。以下の表では、領域をそれを実装する必須クラス名にマップします。

注: 上記のいずれのクラスも持たない子は使用されません。

ヘッダー、フッター、サイドバーの表示は、本文や左右のサイドバーと同様に構成可能です。

境界線レイアウトのデフォルト設定。境界線レイアウトは、左サイドバーの幅をコンテナーの幅全体の 20% に設定して右サイドバーの幅を 10% に設定し、すべての領域を表示するように構成します。領域の一部を非表示にするには、該当するプロパティ (showHeader、showFooter、showLeft、showRight) を false に設定する必要があります。

プロパティ設定

目的:	使用するプロパティ:		設定の選択肢:	必須ですか？	デフォルト設定
レイアウトを境界線レイアウトとして設定	layoutMode		border		”column”
領域の表示または非表示	ヘッダー領域の表示または非表示	showHeader	true または false		true
	フッター領域の表示または非表示	showFooter	true または false		true
	左サイドバー領域の表示または非表示	showLeft	true または false		true
	右サイドバー領域の表示または非表示	showRight	true または false		true
本文とサイドバーの相対幅を設定する (サイドバーの幅は直接構成されます。本文の幅は、コンテナーの幅からサイドバーの幅を減算した値です)	左サイドバーの幅を設定する	leftWidth	ピクセルまたはパーセンテージで示された任意の幅		“20%”
	右サイドバーの幅の設定	rightWidth	ピクセルまたはパーセンテージで示された任意の幅		“10%”

例

以下の図は、以下の設定の結果してHTML マークアップによる境界線レイアウトを示しています。

以下のコードはこの例を実装します。コードでは、カスタム作成された HTML マークアップが使用されています。

HTML の場合:

<div id="layout" style="height: 300px;">
            <div class="left"> 
                  <h3>LEFT SIDEBAR</h3>
            </div>
            <div class="right">
                  <h3>RIGHT SIDEBAR</h3>
            </div>
            <div class="header">HEADER</div>
            <div class="footer">FOOTER</div>
            <div class="center">
                  <h3>BODY</h3>
            </div>
</div>

JavaScript の場合:

$("#layout").igLayoutManager({ layoutMode: “border”,
         borderLayout: {
            leftWidth: “10%”,
            rightWidth: “20%”
        }
});

列レイアウトの構成

概要

列レイアウトは 12 列構成のグリッド システムに基づいています。このシステムでは、項目の幅に対応するように列を結合することができます。このレイアウトは、CSS で実装されるため、igLayoutManager のインスタンスを作成する必要はありません。他のレイアウトと比較すると、このレイアウトには以下のような利点があります。

• 数行の CSS で正常に作動
• 最も単純なマークアップ構造

CSS クラスを定義する場合は、他の規則によって上書きされないように、これらのすべてのクラスの名前に必ずコンテナーの ig クラスを接頭辞として付けます。項目のプレースホルダーの幅は、特定の行に必要な列数を結合して定義します。コンテナーでは 12 列まで結合させることができますが、各行についてコンテナーが結合または占有できる列の合計数は12 列です。列を実装する <div> クラスの命名規則は <colN> で、N はこのクラスについて結合される列の数です。たとえば、col4 は、プレースホルダーによって 4 つの行が結合されることを意味します。col1 は、列の結合が行われない、つまりプレースホルダーによって占有されるグリッド内の列は 1 つのみであることを示します。

<colN> とマークされた他のコンテナーには、任意の数の行をネストできます。この場合、<colN> とマークされた親コンテナーは 12 列に分割され、ネストされた行は、親の幅に基づいて行自身の幅を算出します。つまり、親コンテナーに col6 クラスが適用されている場合、親コンテナーはメイン コンテナーの 12 列の 12 列を結合します。このコンテナーに 3 行を入れ、各行に col4 クラスを適用した場合、各行はそのページのメイン コンテナーの 2 列を結合します。

最低必要条件

列レイアウトでは、igLayoutManager のインスタンスを作成する必要はありません。<div> 要素への row クラスの割り当てと子要素への <colN> クラスの割り当てのみ行えます。このように、レイアウトはブラウザーの幅を使用して、12 列の幅を計算します。メイン コンテナーの幅を定義するには、igLayoutManager のインスタンスを作成しその width プロパティを設定する必要があります。

例

以下の図は、3 つの項目がそれぞれ 4 列にまたがる列レイアウトの HTML マークアップを示しています。各段落は、col4 クラスを持つ <div> 要素にラップされます。

以下のコードはこの例を実装します。

HTML の場合:

<div id="layout" class="ig-layout-col">
            <div class="row">
                  <div class="col4">
                        <p style="height: 100px; background-color: gray; color: white">
                              Content 1
                        </p>
                  </div>
                  <div class="col4">
                        <p style="height: 100px; background-color: gray; color: white">
                              Content 2
                        </p>
                  </div>
                  <div class="col4">
                        <p style="height: 100px; background-color: gray; color: white">
                              Content 3
                        </p>
                  </div>
            </div>
</div>

フロー レイアウトの構成

概要

コントロールのホスト HTML 要素は、順不同リスト (UL) です。リスト項目 (LI) はホスト要素の HTML マークアップで定義でき、初期化時に、コントロールは各 CSS クラスを追加します。リスト項目は、コントロールのオプションで項目オブジェクトの配列として定義することもできます。その場合、igLayoutManager は対応するマークアップを生成します。できる限りセマンティックなマークアップにするには、オプションで項目が定義されているときに、マークアップからではなく、順不同リスト (UL: unordered list) およびリスト項目 (LI: list items) を使用して項目をレンダリングします。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的:		使用するプロパティ:	設定の選択肢:	必須ですか？	デフォルト設定
HTML マークアップなしでのフロー レイアウトの構成	レイアウトをフロー レイアウトとして設定	layoutMode	flow		“column”
	項目数を指定する	itemCount	必要な項目数		“null”
		または
	レイアウトを境界線レイアウトとして設定	layoutMode	flow		“column”
	項目を並べ替えてサイズを設定	items	オブジェクトの配列		[ ]
HTML マークアップを使用したフロー レイアウトの構成	レイアウトを境界線レイアウトとして設定	layoutMode	flow		“column”

例

以下のスクリーンショットは、以下の設定の結果、HTML マークアップなしのフローのレイアウトがどのようになるか示しています。

以下のコードはこの例を実装します。

HTML の場合:

<ul id="layout"></ul>

JavaScript の場合:

$("#layout").igLayoutManager({
     layoutMode: “flow”, 
     itemCount: 11 
});

グリッド レイアウトの構成

概要

igLayoutManager のレイアウトは、コントロールの layoutMode プロパティを grid に設定することにより、グリッド レイアウトに合わせて構成します。グリッド レイアウトは、行と列を結合できる絶対配置されたボックスの複合体です。HTML マークアップから行うこのレイアウトのインスタンス作成は、サポートされません。

グリッドの列数と行数、および項目の高さと幅を指定できます。項目の高さと幅は、columnHeight および columnWidth プロパティを使用して構成します。これらのプロパティは、行や列をまたがない標準の項目のサイズ (つまり、複数の行および列をまたがない項目のサイズ、および各項目がグリッド内で占有するセルは 1 つのみ) を設定します。

columnWidth/columnHeight を * に設定する場合、幅/高さがすべての列で均等に分割されます。

columnWidth/columnHeight を配列 (["100px", "20%", "*", "*"] など) として指定する場合、 2 つ以上の列を * に設定すると、残りのスペースはその列で均等に分割されます。columnWidth が配列として設定される場合、その長さは cols プロパティをオーバーライドします。columnHeight が配列として設定される場合、その長さは rows プロパティをオーバーライドします。

項目のカスタム配置は、オブジェクトの配列に設定される items プロパティによりサポートされます。コンテナーのサイズ変更時に、項目の自動再配置を無効にできます。これは、ユーザー エクスペリエンスを管理する追加手段となります。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的:	使用するプロパティ:	設定の選択肢:	必須ですか？	デフォルト設定
レイアウトをグリッド レイアウトとして設定	layoutMode	"grid"		"column"
項目数および項目の配置	items	オブジェクトの配列		[ ]
グリッドの列数の設定	cols	必要な列数		"nul"
項目の高さの設定	columnHeight	ピクセル、パーセンテージ、または高さをすべての列で均等に分割する * として指定される項目の最適な高さ。各列で異なる高さを指定するために高さの配列を受け取ることもできます。この値には、項目の上の余白の幅が含まれます。		"null"
項目の幅の設定	columnWidth	ピクセル、パーセンテージ、または幅をすべての列で均等に分割する * として指定される項目の最適な幅。各列で異なる幅を指定するために幅の配列を受け取ることもできます。この値には、項目の左の余白の幅が含まれます。		"null"
行数の設定	rows	グリッドの目的の行数		"null"
項目の左の余白の設定	marginLeft	目的のサイズ (ピクセル)		“0”
項目の上の余白の設定	marginTop	目的のサイズ (ピクセル)		“0”
コンテナーのサイズ変更時の項目の自動再配置を有効/無効	rearrangeItems	true または false		“true”
アニメーション化の継続時間の設定	animationDuration	目的の継続時間 (ミリ秒)		“500”

例

以下の図は、以下の設定の結果として、2x2 グリッドとして構成されたグリッド レイアウトを示します。このレイアウトには、最初の行の 2 列にまたがる項目があります。

以下のコードはこの例を実装します。

HTML の場合:

<ul id="layout"></ul>

JavaScript の場合:

$('#layout').igLayoutManager({
    layoutMode: "grid",
    width: "100%",
    height: "500px",
    gridLayout: {
        cols: 2,
        rows: 2
    },
    items: [
          {
              colIndex: 0,
              rowIndex: 0,
                      colSpan: 2
          }, {
              colIndex: 0,
              rowIndex: 1
          }, {
              colIndex: 1,
              rowIndex: 1
          }
    ]
});

垂直レイアウトの構成

概要

垂直レイアウトは、コントロールの layoutMode プロパティにより構成可能です。コントロールのホスト HTML 要素は DIV です。子 DIV はホスト要素の HTML マークアップで定義でき、初期設定時に、コントロールは各 CSS クラスを追加します。リスト項目は、コントロールのオプションで項目オブジェクトの配列として定義することもできます。その場合、igLayoutManager は対応するマークアップを生成します。項目数は、itemCount プロパティにより指定します。

プロパティ設定

以下の表では、任意の構成と各プロパティ設定のマップを示します。

目的:	使用するプロパティ:	設定の選択肢:	必須ですか？	デフォルト設定
レイアウトを HTML マークアップなしの垂直レイアウトとして設定	layoutMode	vertical		“column”
	itemCount	目的の項目数		“null”
	または
	layoutMode	vertical		“column”
	items	オブジェクトの配列		[ ]
レイアウトを HTML マークアップありの垂直レイアウトとして設定	layoutMode	vertical		“column”

例

以下のスクリーンショットは、以下の設定の結果、HTML マークアップなしの垂直レイアウトがどのようになるか示しています。

以下のコードはこの例を実装します。

HTML の場合:

<ul id="layout"></ul>

JavaScript の場合:

$("#layout").igLayoutManager({
     layoutMode: “vertical”, 
     itemCount: 3 
});

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• イベント処理 (igLayoutManager): このトピックではコード例を使用して、igLayoutManager にイベント ハンドラーをアタッチする方法を説明します。

• igLayoutManager アクセシビリティの遵守: このトピックは、igLayoutManager コントロールのアクセシビリティ機能を説明し、このコントロールを含むページのアクセシビリティ遵守を実現する方法に関する情報を提供します。

• 既知の問題と制限 (igLayoutManager): このトピックでは、igLayoutManager コントロールの既知の問題と制限に関する情報を提供します。

• jQuery および MVC API リファレンス リンク (igLayoutManager): このトピックでは、igLayoutManager コントロールの jQuery および ASP.NET MVC ヘルパー クラスの API ドキュメントへのリンクを提供します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• ASP.NET MVC の基本的な使用方法: このサンプルでは、レイアウト マネージャー コントロールの ASP.NET MVC ヘルパーを使用する方法を紹介します。

• HTML マークアップからの境界線のレイアウト: このサンプルでは、「center」/「left」/「right」/「header」/「footer」 の各 CSS クラスを割り当て、HTML マークアップから igLayoutManager コントロールの境界線レイアウトを初期化する方法を紹介します。

• 境界線のレイアウト - JavaScript による初期化: このサンプルでは、itemRendered イベントの処理や作成した領域へのコンテンツの割り当てによって、igLayoutManager コントロールの境界線レイアウトを JavaScript から初期化する方法を紹介します。

• レスポンシブ列レイアウト: このサンプルでは、項目にクラスを割り当て、その内容がまたがる領域を指定して、igLayoutManager コントロールの列レイアウトを使用する方法を紹介します。このサンプルは JavaScript の初期化コードを使用しません。CSS および HTML のみで実装されています。

• レスポンシブ フロー レイアウト: このサンプルは、さまざまな項目のサイズがピクセルまたはパーセンテージで設定された igLayoutManager コントロールのフロー レイアウトの応答について、また初期化のマークアップの必要なしで igLayoutManager のオプションに項目数を設定する方法を紹介します。

• colspan および rowspan 対応のグリッド レイアウト: このサンプルは、定義済みのサイズのグリッドに項目を任意の位置に配置できる igLayoutManager コントロールのグリッド レイアウトの機能を紹介します。rowspan や colspan がさまざまに設定された項目があります。

• カスタム サイズのグリッド レイアウト: このサンプルは、igLayoutManager コントロールのグリッド レイアウトで各列に特定の幅および高さを指定する機能を紹介します。

• レスポンシブ垂直レイアウト: このサンプルは、さまざまな項目のサイズがピクセルまたはパーセンテージで設定された igLayoutManager コントロールの垂直レイアウトの応答について、また初期化のマークアップの必要なしで igLayoutManager のオプションに項目数を設定する方法を紹介します。