イベントの処理 (igPopover)

トピックの概要

目的

このトピックでは、igPopover™ コントロールのイベントを説明し、イベント ハンドラーをアタッチするコード例を示します。

前提条件

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

• Ignite UI for jQuery でイベントの使用: このトピックは、Ignite UI for jQuery® コントロールが発生させるイベントの処理方法について説明します。また、初期化と初期化後のイベントのバインドの違いについても説明します。

• igPopover の概要: このトピックでは、主要機能や機能性など、igPopover コントロールの概念的な情報を提供します。

• igPopover の追加: このトピックでは、コード例を使用して、JavaScript または ASP.NET MVC で HTML ページに igPopover コントロールを追加する方法を説明します。

このトピックの内容

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

• イベントの処理 - 概要
  • イベント処理の概要
  • イベント処理ケースの概要表
• イベント リファレンス
  • イベント リファレンス表
• コード例の概要
• コード例: jQuery での初期化時の showing イベントの処理
  • 説明
• コード例: ASP.NET MVC での実行時の showing イベントの処理
  • 説明
• コード例: showing イベントのハンドラーでの igPopover コンテンツの変更
  • 説明
• コード例: イベントのハンドラーでの igPopover の配置の変更
  • 説明
• 関連コンテンツ
  • トピック
  • サンプル

イベントの処理 - 概要

イベント処理の概要

イベント ハンドラー関数の Ignite UI for jQuery コントロールへのアタッチは、一般的にコントロールの初期化時に行われます。このイベントが発生すると、処理関数を呼び出します。

jQuery はイベント ハンドラーの割り当てるための以下のメソッドをサポートします。

• bind()
• delegate()
• live()
• on()

以下のテーブルは、各関数の詳細を示します。

bind() を使用する場合、現在使用可能な要素にのみ指定されたハンドラーへアタッチすることに注意してください。つまり、動的に追加された項目 (DOM が読み込まれた後) は、イベント ハンドラーの割り当てに含まれません。

この中では delegate() メソッドをお勧めします。これは、このメソッドがパフォーマンスに優れ、コントロール インスタンスが破棄されて、再作成しなければならない状況でもイベント ハンドラーを自動的に再アタッチできるためです。

イベント処理ケースの概要表

以下の表で、igPopover に関連するイベント処理ケースを簡単に説明します。詳細は、表の後に記載されています。

イベント リファレンス

イベント リファレンス表

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

コード例の概要

コード例の概要表

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

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

説明

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

JavaScript の場合:

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

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

説明

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

JavaScript の場合:

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

コード例: showing イベントのハンドラーでの igPopover コンテンツの変更

説明

この例は、showing イベントのハンドラーを使用して igPopover のコンテナーのコンテンツを変更する方法を紹介します。

JavaScript の場合:

$(document).delegate(".selector", "igpopovershowing", function(evt, ui) { 
   // Handle event
   ui.content = ui.content + “ Updated”;
});

コード例: イベントのハンドラーでの igPopover の配置の変更

説明

この例は、実行時に shown イベントを使用して、ポップオーバー コンテナーの位置を変更する方法を紹介します。

JavaScript の場合:

$(document).delegate(".selector", "igpopovershown", function(evt, ui) { 
   // Handle event   
    var position = { top: 300, left: 450 };
    $("#img1").igPopover("setCoordinates", position);
});

関連コンテンツ

トピック

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

• igPopover の構成: このトピックでは、igPopover コントロールのコンテンツの構成、アクティブ化、および配置する方法を説明します。

• アクセシビリティ準拠 (igPopover): このトピックでは、igPopover コントロールのアクセシビリティ機能について説明し、コントロールを含むページに対するアクセシビリティの準拠を実現する方法を紹介します。

• 既知の問題と制限事項 (igPopover): このトピックでは、igPopover コントロールの既知の問題と制限事項および回避策についての情報を提供します。

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

サンプル

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

• 基本的な使用方法: このサンプルは、ASP.NET MVC シナリオでの igPopover コントロールを紹介します。コントロールは、チェーン構文を使用して View で初期化されます。

• ASP.NET MVC の基本的な使用方法: このサンプルは、JavaScript による igPopover の基本的な初期化シナリオ (単一のターゲット要素および複数のターゲット要素) を紹介します。