バージョン

イベントの処理 (igTileManager)

トピックの概要

目的

このトピックではコード例を使用して、イベント ハンドラーを 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 オプションの有効な設定
  • dataBinding
  • dataBound
  • rendered
  • rendering
  • tileMaximized
  • tileMaximizing
  • tileMinimized
  • tileMinimizing
  • tileRendered
  • tileRendering
jQuery および ASP.NET MVC で実行時にイベントを処理 コントロール初期化の外側でハンドラーを実装するために、イベント ハンドラーを関数名に割り当てることができます。

イベント リファレンス

イベント リファレンス表

以下の表で、igTileManager コントロールがサポートするイベントの目的と機能を簡単に説明します。

イベント 説明
dataBinding データのバインド前に発生します。
dataBound データのバインドが完了した後、描画がまだ開始されていないときに発生します。
rendered ウィジェットが作成され、それが描画する DOM をすべてアタッチした後に発生します。
rendering ウィジェットの描画を開始する前に発生します。項目説明が明示的に提供されず内部的に生成される場合、この時点で項目説明が存在していることが必要です。
tileMaximized アニメーションの最大化が完了した後に発生します。
tileMaximizing 最小化された状態から最大化された状態にタイルを移動する前に発生します。
tileMinimized アニメーションの最小化が完了した後に発生します。
tileMinimizing 最大化された状態から最小化された状態にタイルを移動する前に発生します。
tileRendered タイルが描画された後に発生します。
tileRendering タイルの描画を開始する前に発生します。

コード例の概要

コード例の概要表

以下の表は、このトピックで使用したコード例をまとめたものです。

例 説明
jQuery での初期化時の Rendered イベントの処理 この例は、初期化時に rendered イベントにイベント処理関数を割り当てます。
ASP.NET MVC での実行時の Rendered イベントの処理 この例は、実行時に rendered イベントにイベント ハンドラーを割り当てます。

コード例: jQuery での初期化時の Rendered イベントの処理

説明

この例は、初期化時に rendered イベントにイベント処理関数を割り当てます。

コード

JavaScript の場合:

$(".selector").igTileManager({
    rendered: function(evt, ui) { 
          // Handle event
    }
});

コード例: ASP.NET MVC での実行時の Rendered イベントの処理

説明

この例は、実行時に rendered イベントにイベント ハンドラーを割り当てます。

コード

JavaScript の場合:

$(document).delegate(".selector", "igtilemanagerrendered", function(evt, ui) { 
   // Handle event
});

関連コンテンツ

トピック

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

サンプル

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

オンラインで表示: GitHub