このトピックではコード例を使用して、実際の HTML または JavaScript のいずれかの実装で、igLayoutManager
™ コントロールを HTML ページに追加する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igLayoutManager
コントロールの概念について説明し、サポートされているレイアウトやその使用についての情報を提供します。このトピックは、以下のセクションで構成されます。
igLayoutManager
は、番号なしリスト (<ul>
) の要素上で、リスト項目 (<li>
) 要素または <div>
要素で初期化します。リストは、以下の方法のいずれかの方法で作成できます。
<li>
または <div>
要素は、ホスト要素の HTML マークアップ内で定義でき、また初期化する場合にコントロールがそれぞれの CSS クラスを追加します。この方法は、items コレクションと itemCount プロパティ が使用され、 また igLayoutManager
が対応するマークアップを生成します。
注:
itemCount
プロパティを使用して項目数を定義する場合、いずれの項目もマークアップで定義しないでください。itemCount
を設定するとともにマークアップ内で項目を定義する方法は未定義のシナリオで、itemCount
プロパティで定義された項目を、マークアップ内で定義された項目に追加します。
以下の表で、igLayoutManager
コントロールの要件を簡単に説明します。
要件 / 必要なリソース | 説明 | 必要な作業 |
---|---|---|
jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery は、これらのフレームワークの最上位にビルドされます。 | ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。 |
igLayoutManager JavaScript リソース |
Ignite UI for jQuery ライブラリの igLayoutManager 機能は、複数のファイルで配布されます。必要なリソースは以下の方法で読み込むことができます。
以下の表は、igLayoutManager コントロール関連の Ignite UI for jQuery ライブラリの依存関係を示します。これらのリソースは、リソースを手動で取り込むことを選択する場合は明示的に参照される必要があります (igLoader は使用しない)。
JS リソース - infragistics.ui.layoutmanager.js
説明 - igLayoutManager コントロール
|
以下のいずれかを追加します。
|
IG テーマ (オプション) | このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル: {IG CSS root}/themes/Infragistics/infragistics.theme.css | |
igLayoutManager の構造 | 以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。 {IG CSS root}/structure/modules/infragistics.ui.layout.css | ページのファイルにスタイル参照を追加します。 |
注: JavaScript と CSS リソースを読み込むためには
igLoader
コンポーネントを使うことを推奨します。この方法の詳細は、Infragistics Loader による必要なリソースの自動追加のトピックを参照してください。さらに、オンラインの Ignite UI for jQuery サンプル ブラウザー には、igLayoutManager
コンポーネントでigLoader
を使用する方法の具体的な例が記載されています。
igLayoutManager
を HTML ページに追加する一般的な手順を簡単に示すと、以下のようになります。
igLayoutManager
コントロールをホストするための HTML 要素の追加
igLayoutManager
のインスタンスの作成、およびレイアウトの指定
ここでは、フロー レイアウトとデフォルト設定を持つ igLayoutManager
コントロールを HTML ページに追加する手順について説明します。ここでは、実際の HTML/JavaScript を実装します。これは、igLayoutManager
コントロールによって必要とされるすべての Ignite UI for jQuery リソースを読み込むために、Infragistics Loader (igLoader
) コンポーネントを使用します。マークアップについても、HTML ページに定義されています。igLayoutManager
は、HTML マークアップ内で (すなわち、<ul>
要素のある <li>
要素) 直接、初期化します。
その他のシナリオについては、igLayoutManager の構成を参照してください。
以下のスクリーンショットは結果のプレビューです。
必要なリソースが追加され、適切に参照されていること。(リソースの概要については、要件を参照してください。)以下が含まれます。
ページの <head>
セクションで参照される、必要な JavaScript リソース。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
ページで参照される igLoader
コンポーネント。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
インスタンスが作成された igLoader
コンポーネント:
HTML の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "Scripts/ig/",
cssPath: "Content/ig/",
resources: "igLayoutManager"
});
</script>
以下の手順は、基本的な igLayoutManager
コントロールを、フロー レイアウトで Web ページに追加する方法を示します。
igLayoutManager
コントロールをホストするための HTML 要素を追加します。
HTML ページ上で、igLayoutManager
コントロールをホストするために、HTML <ul>
要素を追加します。
HTML の場合:
<ul id="layout">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
igLayoutManager
のインスタンスの作成、およびレイアウトを指定します。
HTML ページのスクリプト要素に初期化コードを追加します。初期化コードは、手順 1 で追加された <ul>
要素に igLayoutManager
インスタンスを作成します。
以下のコードは、igLayoutManager
コントロールのインスタンスを作成します。
JavaScript の場合:
$.ig.loader(function () {
// Create a basic igLayoutManager control
$("#layout").igLayoutManager({
layoutMode: "flow"
});
});
この手順は、実際の HTML/JavaScript 実装を使用して、基本機能を持つ igLayoutManager
コントロールを HTML ページへ追加する手順を説明します。igLayoutManager
コントロールで必要なすべての Ignite UI for jQuery リソースを読み込むための Infragistics Loader コンポーネントを使用します。igLayoutManager
は、コントロール オプション内の項目オブジェクトの配列として初期化します (すなわち、ブランクの <ul>
要素で、itemCount
プロパティを使用して、igLayoutManager
のインスタンス内部で項目数を提供します)。
以下のスクリーンショットは最終結果のプレビューです。
必要なリソースが追加され、適切に参照されていること。(リソースの概要については、要件を参照してください。)以下が含まれます。
ページの <head>
セクションで参照される、必要な JavaScript リソース。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
ページで参照される igLoader
コンポーネント。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
インスタンスが作成された igLoader
コンポーネント:
HTML の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "Scripts/ig/",
cssPath: "Content/ig/",
resources: "igLayoutManager"
});
</script>
以下の手順は、フロー レイアウトを備えた基本的な igLayoutManager
コントロールを、JavaScript の実装を使用して HTML ページに追加する方法を示します。その他のシナリオについては、igLayoutManager の構成を参照してください。
igLayoutManager
をホストするためにのHTML 要素の追加。
HTML ページ上で、igLayoutManager
をホストするために、HTML <ul>
要素を追加します。
HTML の場合:
<ul id="layout">
</ul>
igLayoutManager
のインスタンスの作成、およびレイアウトを指定します。
HTML ページのスクリプト要素に初期化コードを追加します。初期化コードは、手順 1 で追加された <ul>
要素に igLayoutManager
インスタンスを作成します。
以下のコードは、igLayoutManager
コントロールのインスタンスを作成します。
JavaScript の場合:
$.ig.loader(function () {
// Create a basic igLayoutManager control
$("#layout").igLayoutManager({
layoutMode: "flow",
itemCount: 11,
});
});
以下のサンプルでは、itemRendered
イベントの処理や作成した領域へのコンテンツの割り当てによって、レイアウト マネージャー コントロールの境界線レイアウトを JavaScript から初期化する方法を紹介します。
この手順は、基本的な機能を備えた igLayoutManager
を ASP.NET MVC View に追加する方法を示します。この例では、必要なローダーの構成とともに ASP.NET MVC 構文を使用します。igLayoutManager
は、コントロール オプション内の項目オブジェクトの配列として初期化します (すなわち、ブランクの <ul>
要素で、itemCount
プロパティを使用して、igLayoutManager
のインスタンス内部で項目数を提供します)。
以下のスクリーンショットは最終結果のプレビューです。
必要なリソースが追加され、適切に参照されていること。(これらのリソースの概念については、「要件」を参照してください。)以下が含まれます。
ページの <head>
セクションで参照される、必要な JavaScript リソース。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
ページで参照される igLoader
コンポーネント。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
ASP.NET ビューでインスタンスを作成した igLoader
コンポーネント:
ASPX の場合:
@(Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Render()
)
以下の手順は、基本的な igLayoutManager
コントロールをフロー レイアウトで ASP.NET MVC アプリケーションに追加する方法を示します。
igLayoutManager
コントロールを追加します。
HTML ページ上で、igLayoutManager
をホストするために、HTML <ul>
要素を追加します。
HTML の場合:
<ul id="layout"></ul>
igLayoutManager
のインスタンス作成
以下のコードは、igLayoutManager
コントロールのインスタンスを作成します。
ASPX の場合:
@(Html.Infragistics()
.ID("layout")
.LayoutMode("flow")
.ItemCount(11)
.Render()
)
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igLayoutManager の構成: このトピックではコード例を使用して、igLayoutManager
コントロールがサポートする別のレイアウトを設定する方法を説明します。
イベント処理 (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
コントロールの境界線レイアウトを初期化する方法を紹介します。
レスポンシブ列レイアウト: このサンプルでは、項目にクラスを割り当て、その内容がまたがる領域を指定して、igLayoutManager
コントロールの列レイアウトを使用する方法を紹介します。このサンプルは JavaScript の初期化コードを使用しません。CSS および HTML のみで実装されています。
レスポンシブ フロー レイアウト: このサンプルは、さまざまな項目のサイズがピクセルまたはパーセンテージで設定された igLayoutManager
コントロールのフロー レイアウトの応答について、また初期化のマークアップの必要なしで igLayoutManager
のオプションに項目数を設定する方法を紹介します。
colspan および rowspan 対応のグリッド レイアウト: このサンプルは、定義済みのサイズのグリッドに項目を任意の位置に配置できる igLayoutManager
コントロールのグリッド レイアウトの機能を紹介します。rowspan や colspan がさまざまに設定された項目があります。
カスタム サイズのグリッド レイアウト: このサンプルは、igLayoutManager
コントロールのグリッド レイアウトで各列に特定の幅および高さを指定する機能を紹介します。
レスポンシブ垂直レイアウト: このサンプルは、さまざまな項目のサイズがピクセルまたはパーセンテージで設定された igLayoutManager
コントロールの垂直レイアウトの応答について、また初期化のマークアップの必要なしで igLayoutManager
のオプションに項目数を設定する方法を紹介します。
オンラインで表示: GitHub