このトピックでは、igPopover
™ コントロールのイベントを説明し、イベント ハンドラーをアタッチするコード例を示します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
Ignite UI for jQuery でイベントの使用: このトピックは、Ignite UI for jQuery® コントロールが発生させるイベントの処理方法について説明します。また、初期化と初期化後のイベントのバインドの違いについても説明します。
igPopover の概要: このトピックでは、主要機能や機能性など、igPopover コントロールの概念的な情報を提供します。
igPopover の追加: このトピックでは、コード例を使用して、JavaScript または ASP.NET MVC で HTML ページに igPopover
コントロールを追加する方法を説明します。
このトピックは、以下のセクションで構成されます。
イベント ハンドラー関数の Ignite UI for jQuery コントロールへのアタッチは、一般的にコントロールの初期化時に行われます。このイベントが発生すると、処理関数を呼び出します。
jQuery はイベント ハンドラーの割り当てるための以下のメソッドをサポートします。
以下のテーブルは、各関数の詳細を示します。
関数 | 目的 |
---|---|
bind | 指定したセレクターに一致する既存の DOM 要素へイベント ハンドラーをアタッチします。 |
live | 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベントハンドラーは、DOM ツリーまで伝達しません。 |
delegate | 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベント ハンドラーは、DOM ツリーまで伝達します。 |
on | 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。(delegate 関数は jQuery version 1.7 で廃止され、on 関数がイベント ハンドラー確立の優先方法になりました。) |
bind()
を使用する場合、現在使用可能な要素にのみ指定されたハンドラーへアタッチすることに注意してください。つまり、動的に追加された項目 (DOM が読み込まれた後) は、イベント ハンドラーの割り当てに含まれません。
この中では delegate()
メソッドをお勧めします。これは、このメソッドがパフォーマンスに優れ、コントロール インスタンスが破棄されて、再作成しなければならない状況でもイベント ハンドラーを自動的に再アタッチできるためです。
以下の表で、igPopover
に関連するイベント処理ケースを簡単に説明します。詳細は、表の後に記載されています。
イベント処理ケース | 詳細 |
---|---|
jQuery における初期化時のイベント処理 | ウィジェット初期化時にイベントへバインドすると、以下の形式でオプションを使用してイベントをサブスクライブします。eventName: <handler> eventName オプションの有効な設定:
|
jQuery および ASP.NET MVC で実行時にイベントを処理 | コントロール初期化の外側でハンドラーを実装するために、イベント ハンドラーを関数名に割り当てることができます。 |
以下の表で、igPopover
コントロールがサポートするイベントの目的と機能を簡単に説明します。
イベント | 説明 |
---|---|
showing | ポップオーバーを表示する前に発生します。 |
shown | ポップオーバーを表示した後に発生します。 |
hiding | ポップオーバーを非表示にする前に発生します。 |
hidden | ポップオーバーを非表示にした後に発生します。 |
以下の表は、このトピックで使用したコード例をまとめたものです。
例 | 説明 |
---|---|
jQuery における初期化時のイベント処理 | この例は、初期化時に showing イベントにイベント処理関数を割り当てます。 |
ASP.NET MVC での実行時のイベント処理 | この例は、実行時に showing イベントにイベント ハンドラーを割り当てます。 |
イベントのハンドラーでの igPopover のコンテンツの変更 | この例は、showing イベントのハンドラーを使用して igPopover のコンテナーのコンテンツを変更する方法を紹介します。 |
イベントのハンドラーでの igPopover の配置の変更 | この例は、実行時に shown イベントを使用して、ポップオーバー コンテナーの位置を変更する方法を紹介します。 |
この例は、初期化時に showing イベントにイベント処理関数を割り当てます。
JavaScript の場合:
$(".selector").igPopover({
showing: function(evt, ui) {
// Handle event
}
});
この例は、実行時に showing イベントにイベント ハンドラーを割り当てます。
JavaScript の場合:
$(document).delegate(".selector", "igpopovershowing", function(evt, ui) {
// Handle event
});
この例は、showing イベントのハンドラーを使用して igPopover
のコンテナーのコンテンツを変更する方法を紹介します。
JavaScript の場合:
$(document).delegate(".selector", "igpopovershowing", function(evt, ui) {
// Handle event
ui.content = ui.content + “ Updated”;
});
この例は、実行時に 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
の基本的な初期化シナリオ (単一のターゲット要素および複数のターゲット要素) を紹介します。
オンラインで表示: GitHub