このトピックは、イベント ハンドラーを igSplitter
™ にアタッチする方法をコード例を用いて説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igSplitter の概要: このトピックでは、機能、ユーザー機能性など、igSplitter
コントロールに関する概念的な情報を提供します。
igSplitter の追加: このトピックは、JavaScript および ASP.NET MVC のいずれかで igSplitter
コントロールを HTML ページへ追加する方法をコード例を用いて説明します。
このトピックは、以下のセクションで構成されます。
イベント ハンドラー関数の igSplitter
コントロールへのアタッチは、一般的にコントロールの初期化時に行われます。このイベントが発生すると、処理関数を呼び出します。
HTML ヘルパー内ではイベント ハンドラーを定義できないので、Ignite UI for MVC を使用するときは、実行時にイベント ハンドラーを割り当てる必要があります。
jQuery はイベント ハンドラーの割り当てるための以下のメソッドをサポートします。
この中では delegate() メソッドをお勧めします。これは、このメソッドがパフォーマンスに優れ、コントロール インスタンスが破棄されて、再作成しなければならない状況でもイベント ハンドラーを自動的に再アタッチできるためです。
igSplitter
は、以下のイベントをサポートします:
以下の表は、igSplitter
に関係するイベント処理ケースを簡単に説明します。詳細は、表の後に記載されています。
イベント処理ケース | 詳細 |
---|---|
jQuery における初期化時のイベント処理 |
ウィジェット初期化時にイベントへバインドすると、以下の形式でオプションを使用してイベントをサブスクライブします。
eventName : eventName オプションの有効な設定
|
jQuery および ASP.NET MVC で実行時にイベントを処理 | コントロール初期化の外側でハンドラーを実装するために、イベント ハンドラーを関数名に割り当てることができます。 |
以下の表は、このトピックで使用したコード例をまとめたものです。
例 | 説明 |
---|---|
jQuery の初期化時に resizeStarted イベントを処理する | 初期化時に resizeStarted イベントにイベント処理関数を割り当てる例。 |
ASP.NET MVC で実行時に resizeStarted イベントを処理する | このコード例では、実行時にイベント ハンドラーを割り当てます。 |
この例は、初期化時に resizeStarted
イベントにイベント処理関数を割り当てます。
JavaScript の場合:
$(".selector").igSplitter({
resizeStarted: function(evt, ui) {
// Handle event
}
});
この例では、実行時に resizeStarted
イベントにイベント ハンドラーを割り当てます。
JavaScript の場合:
$(document).delegate(".selector", "igsplitterresizestarted", function(evt, ui) {
// Handle event
});
以下のサンプルでは、スプリッター コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。
このトピックについては、以下のサンプルも参照してください。
ベーシック垂直スプリッター: このサンプルでは、スプリッター コントロールを使用してページの垂直レイアウトを管理する方法を紹介します。最初のコンテナーは大陸および国を含むツリー コントロールを表示します。左の垂直パネルはサイズ変更の最大値および最小値があります。ノードをクリックすると、選択した項目の説明が右パネルに表示されます。
ベーシック水平スプリッター: このサンプルでは、スプリッター コントロールを使用して水平レイアウトのマスター/詳細グリッドを管理する方法を紹介します。最初のコンテナーは顧客データを含むマスター グリッドを含みます。マスター グリッドの行がクリックした後に 2 つ目のコンテナーにこの顧客の注文を含むグリッドを表示します。
ネスト スプリッター: このサンプルでは、ネスト スプリッターのレイアウトを管理する方法を紹介します。パネルは大陸、国、および都市を含むツリーを表示します。ノードをクリックすると、2 つ目のスプリッターにあるマップはノードの座標によって中央揃えます。国が選択した場合、その国の都市を含むグリッドはマップの下に表示されます。パネルはデフォルトでサイズ変更できません。
ASP.NET MVC の基本的な使用方法: このサンプルでは、 igSplitter
の ASP.NET MVC ヘルパーを使用する方法を紹介します。
スプリッター API およびイベント: このサンプルでは、igSplitter
コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。
オンラインで表示: GitHub