このトピックではコード例を使用して、イベント ハンドラーを igLayoutManager™ コントロールにアタッチする方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
Ignite UI for jQuery でイベントの使用: このトピックでは、Web アプリケーションで Ignite UI for jQuery® を操作して、必要なリソースを管理する方法について説明します。
igLayoutManager の概要: このトピックでは、igLayoutManager コントロールの概念について説明し、サポートされているレイアウトやその使用についての情報を提供します。
igLayoutManager の追加: このトピックではコード例を使用して、HTML 単体、JavaScript または ASP.MVC 実装のいずれかで igLayoutManager コントロールを HTML ページに追加する方法を説明します。
このトピックは、以下のセクションで構成されます。
イベント ハンドラー関数の igLayoutManager コントロールへのアタッチは、一般的にコントロールの初期化時に行われます。
HTML 内ではイベント ハンドラーを定義できないので、Ignite UI for MVC を使用するときは、実行時にイベント ハンドラーを割り当てる必要があります。
jQuery はイベント ハンドラーの割り当てるための以下のメソッドをサポートします。
igLayoutManager は、以下のイベントをサポートします。
itemRendering - コンテナーで 1 つの項目が描画された後に発生します。itemRendered - すべての項目が描画された後に発生します。rendered - 項目がコンテナーの幅または高さに完全に対応しようとする前に発生します。イベントを処理する方法の詳細は、Ignite UI for jQuery でのイベントの使用のトピックを参照してください。
以下の表で、igLayoutManager に関連するイベント処理ケースを簡単に説明します。詳細は、表の後に記載されています。
| イベント処理ケース | 詳細 |
|---|---|
| jQuery における初期化時のイベント処理 |
ウィジェット初期化時にイベントへバインドすると、以下の形式でオプションを使用してイベントをサブスクライブします。
<eventName>: <handler>
<eventName> の有効な設定
|
| jQuery および ASP.NET MVC で実行時にイベントを処理 | コントロール初期化の外側でハンドラーを実装するために、イベント ハンドラーを関数名に割り当てることができます。 |
以下の表は、このトピックで使用したコード例をまとめたものです。
| 例 | 説明 |
|---|---|
| jQuery での初期化時に itemRendered イベントを処理する | この例は、初期化時に jQuery で itemRendered イベントにイベント処理関数を割り当てます。 |
| ASP.NET MVC での初期化時に itemRendered イベントを処理する | この例は、初期化時に Ignite UI for MVC を使用して itemRendered イベントにイベント処理関数を割り当てます。 |
| jQuery での実行時に itemRendered イベントを処理する | この例は、実行時に jQuery で itemRendered イベントにイベント処理関数を割り当てます。 |
| ASP.NET MVC での実行時に itemRendered イベントを処理する | この例は、実行時に Ignite UI for MVC を使用して itemRendered イベントにイベント処理関数を割り当てます。 |
この例は、初期化時に jQuery で itemRendered イベントにイベント処理関数を割り当てます。
JavaScript の場合:
$(".selector").igLayoutManager({
itemRendered: function(evt, ui) {
// Handle event
}
});
この例は、初期化時に Ignite UI for MVC を使用して itemRendered イベントにイベント処理関数を割り当てます。
ASPX (MVC) の場合:
@(Html.Infragistics().LayoutManager()
.AddClientEvent("iglayoutmanageritemrendered", "itemRenderedHandler")
.Render());
この例は、実行時に jQuery で itemRendered イベントにイベント処理関数を割り当てます。
JavaScript の場合:
$(document).delegate(".selector", "iglayoutmanageritemrendered", function(evt, ui) {
// Handle event
});
この例は、実行時に Ignite UI for MVC を使用して itemRendered イベントにイベント処理関数を割り当てます。
JavaScript の場合:
$(document).delegate(".selector", "iglayoutmanageritemrendered", function(evt, ui) {
// Handle event
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igLayoutManager コントロールのタイトルおよびサブタイトルを構成する方法を説明します。説明には、タイトル領域の幅、テキストの開始位置、およびタイトル / サブタイトルのテキストが含まれます。このトピックについては、以下のサンプルも参照してください。
ASP.NET MVC の基本的な使用方法: このサンプルでは、レイアウト マネージャー コントロールの Ignite UI for 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 のオプションに項目数を設定する方法を紹介します。
オンラインで表示: GitHub