バージョン

イベントの処理

トピックの概要

目的

このトピックは、イベント ハンドラーを igSplitter™ にアタッチする方法をコード例を用いて説明します。

前提条件

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

  • igSplitter の概要: このトピックでは、機能、ユーザー機能性など、igSplitter コントロールに関する概念的な情報を提供します。

  • igSplitter の追加: このトピックは、JavaScript および ASP.NET MVC のいずれかで igSplitter コントロールを HTML ページへ追加する方法をコード例を用いて説明します。

このトピックの内容

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

イベントの処理 - 概要

イベント処理の概要

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

HTML ヘルパー内ではイベント ハンドラーを定義できないので、Ignite UI for MVC を使用するときは、実行時にイベント ハンドラーを割り当てる必要があります。

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

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

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

igSplitter は、以下のイベントをサポートします:

  • collapsed - パネルの折りたたみが完了すると処理されます。どのパネルが折りたたまれたかを示します。
  • expanded - パネルの展開が終了すると処理されます。どのパネルが展開されたかを示します。
  • resizeStarted - スプリッターが移動を開始するとサイズ変更パネルに対して発生します。
  • resizing - スプリッターがコンテナー内で移動していると継続して発生します。スプリッターの移動をキャンセルするために使用します。
  • resizeEnded - スプリッターが移動を停止するとサイズ変更パネルに対して発生します。
  • layoutRefreshed - ブラウザーのサイズ変更のため、パネルが更新された後に発生します。
  • layoutRefreshing - ブラウザーのサイズ変更のため、パネルが更新される前に発生します。

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

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

イベント処理ケース 詳細
jQuery における初期化時のイベント処理 ウィジェット初期化時にイベントへバインドすると、以下の形式でオプションを使用してイベントをサブスクライブします。 eventName: eventName オプションの有効な設定
  • collapsed
  • expanded
  • resizeStarted
  • resizing
  • resizeEnded
  • layoutRefreshed
  • layoutRefreshing
jQuery および ASP.NET MVC で実行時にイベントを処理 コントロール初期化の外側でハンドラーを実装するために、イベント ハンドラーを関数名に割り当てることができます。

コード例

コード例の概要

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

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

コード例: jQuery の初期化時に resizeStarted イベントを処理する

説明

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

コード

JavaScript の場合:

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

コード例: ASP.NET MVCで実行時に resizeStarted イベントを処理する

説明

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

コード

JavaScript の場合:

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

スプリッター API およびイベント サンプル

以下のサンプルでは、スプリッター コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。

https://github.com/IgniteUI/help-samples/tree/master/23.2/JA/splitter/api-events-splitter

関連コンテンツ

サンプル

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

  • ベーシック垂直スプリッター: このサンプルでは、スプリッター コントロールを使用してページの垂直レイアウトを管理する方法を紹介します。最初のコンテナーは大陸および国を含むツリー コントロールを表示します。左の垂直パネルはサイズ変更の最大値および最小値があります。ノードをクリックすると、選択した項目の説明が右パネルに表示されます。

  • ベーシック水平スプリッター: このサンプルでは、スプリッター コントロールを使用して水平レイアウトのマスター/詳細グリッドを管理する方法を紹介します。最初のコンテナーは顧客データを含むマスター グリッドを含みます。マスター グリッドの行がクリックした後に 2 つ目のコンテナーにこの顧客の注文を含むグリッドを表示します。

  • ネスト スプリッター: このサンプルでは、ネスト スプリッターのレイアウトを管理する方法を紹介します。パネルは大陸、国、および都市を含むツリーを表示します。ノードをクリックすると、2 つ目のスプリッターにあるマップはノードの座標によって中央揃えます。国が選択した場合、その国の都市を含むグリッドはマップの下に表示されます。パネルはデフォルトでサイズ変更できません。

  • ASP.NET MVC の基本的な使用方法: このサンプルでは、 igSplitter の ASP.NET MVC ヘルパーを使用する方法を紹介します。

  • スプリッター API およびイベント: このサンプルでは、igSplitter コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。

オンラインで表示: GitHub