このトピックではコード例を使用して、イベント ハンドラーを igTileManager
™ コントロールに添付する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
Ignite UI for jQuery でイベントの使用: このトピックは、Ignite UI for jQuery® コントロールが発生させるイベントの処理方法について説明します。また、初期化と初期化後のイベントのバインドの違いについても説明します。
igTileManager の概要: このトピックでは、主要機能、最小要件およびユーザー機能性など、igTileManager
コントロールについて概念的な情報を提供します。
igTileManager の追加: このトピックでは、主要機能、最小要件およびユーザー機能性など、igTileManager
コントロールについて概念的な情報を提供します。
このトピックは、以下のセクションで構成されます。
イベント ハンドラー関数の igTileManager
コントロールへのアタッチは、一般的にコントロールの初期化時に行われます。このイベントが発生すると、処理関数を呼び出します。
HTML ヘルパー内ではイベント ハンドラーを定義できないので、Ignite UI for MVC を使用するときは、実行時にイベント ハンドラーを割り当てる必要があります。
jQuery はイベント ハンドラーの割り当てるための以下のメソッドをサポートします。
以下のテーブルは、各関数の詳細を示します。
関数 | 目的 |
---|---|
bind | 指定したセレクターに一致する既存の DOM 要素へイベント ハンドラーをアタッチします。 |
live | 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベントハンドラーは、DOM ツリーまで伝達しません。 |
delegate | 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベント ハンドラーは、DOM ツリーまで伝達します。 |
on | 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。(delegate 関数は jQuery version 1.7 で廃止され、on 関数がイベント ハンドラー確立の優先方法になりました。) |
bind()
を使用する場合、現在使用可能な要素にのみ指定されたハンドラーへアタッチすることに注意してください。つまり、動的に追加された項目 (DOM が読み込まれた後) は、イベント ハンドラーの割り当てに含まれません。
この中では delegate() メソッドをお勧めします。これは、このメソッドがパフォーマンスに優れ、コントロール インスタンスが破棄されて、再作成しなければならない状況でもイベント ハンドラーを自動的に再アタッチできるためです。
以下の表で、igTileManager
に関係するイベント処理ケースを簡単に説明します。詳細は、表の後に記載されています。
イベント処理ケース | 詳細 |
---|---|
jQuery における初期化時のイベント処理 |
ウィジェット初期化時にイベントへバインドすると、以下の形式でオプションを使用してイベントをサブスクライブします。
eventName: <handler>
eventName オプションの有効な設定
|
jQuery および ASP.NET MVC で実行時にイベントを処理 | コントロール初期化の外側でハンドラーを実装するために、イベント ハンドラーを関数名に割り当てることができます。 |
以下の表で、igTileManager
コントロールがサポートするイベントの目的と機能を簡単に説明します。
イベント | 説明 |
---|---|
dataBinding | データのバインド前に発生します。 |
dataBound | データのバインドが完了した後、描画がまだ開始されていないときに発生します。 |
rendered | ウィジェットが作成され、それが描画する DOM をすべてアタッチした後に発生します。 |
rendering | ウィジェットの描画を開始する前に発生します。項目説明が明示的に提供されず内部的に生成される場合、この時点で項目説明が存在していることが必要です。 |
tileMaximized | アニメーションの最大化が完了した後に発生します。 |
tileMaximizing | 最小化された状態から最大化された状態にタイルを移動する前に発生します。 |
tileMinimized | アニメーションの最小化が完了した後に発生します。 |
tileMinimizing | 最大化された状態から最小化された状態にタイルを移動する前に発生します。 |
tileRendered | タイルが描画された後に発生します。 |
tileRendering | タイルの描画を開始する前に発生します。 |
以下の表は、このトピックで使用したコード例をまとめたものです。
例 | 説明 |
---|---|
jQuery での初期化時の Rendered イベントの処理 | この例は、初期化時に rendered イベントにイベント処理関数を割り当てます。 |
ASP.NET MVC での実行時の Rendered イベントの処理 | この例は、実行時に rendered イベントにイベント ハンドラーを割り当てます。 |
この例は、初期化時に rendered イベントにイベント処理関数を割り当てます。
JavaScript の場合:
$(".selector").igTileManager({
rendered: function(evt, ui) {
// Handle event
}
});
この例は、実行時に rendered イベントにイベント ハンドラーを割り当てます。
JavaScript の場合:
$(document).delegate(".selector", "igtilemanagerrendered", function(evt, ui) {
// Handle event
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igTileManager とデータのバインド: このトピックは、igTileManager
コントロールをサポートされているデータ ソースにバインドする方法を説明します。
igTileManager の構成: このトピックでは、igTileManager
コントロールの機能およびビヘイビアーを構成する方法を説明します。
アクセシビリティの遵守 (igTileManager): このトピックでは、igTileManager
コントロールのアクセシビリティ機能を説明し、このコントロールを含むページのアクセシビリティ遵守を実現する方法を説明します。
既知の問題と制限 (igTileManager): このトピックでは、igTileManager
コントロールの既知の問題と制限、その回避策に関する情報を提供します。
jQuery および MVC API リファレンス リンク (igTileManager): このトピックでは、igTileManager
コントロールの jQuery および ASP.NET MVC ヘルパー クラスの API 参照ドキュメントへのリンクを提供します。
このトピックについては、以下のサンプルも参照してください。
タイル マネージャーの JSON バインド: このサンプルでは、タイル マネージャー コントロールを JSON データ ソースにバインドする方法を紹介します。
タイル マネージャーの項目構成: このサンプルは、igTileManager
内部で各項目の位置およびサイズを構成する方法を紹介します。
オンラインで表示: GitHub