igDialog の複数ダイアログ

トピックの概要

目的

このトピックでは、igDialog™ ウィンドウを次々に構築する方法を紹介します。

前提条件

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

• igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。

• igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。

このトピックの内容

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

• 複数の igDialog の構成
  • 概要
  • コード
  • 例
• 複数の igDialog API
  • メソッドの設定
  • コード
• 関連コンテンツ
  • トピック
  • サンプル

複数の igDialog の構成

概要

複数の igDialog ウィジェットを 1 ページに表示できます。これらのウィジェットは互いの関係を定義しなくても正しく表示されます。必要な作業は、これらのダイアログを開閉するスクリプトを作成することだけです。通常の igDialog とモーダル ダイアログを組み合わせて使用することもできます。

コントロールが自動的に、最初の HTML プレースホルダーを検出して、最初のダイアログ ウィジェットを最下位で初期化します。最後の igDialog HTML プレースホルダーが、ひとつひとつ最初のウィジェットに対応します。igDialog は、最上位のダイアログのアクセスを許可し、他のダイアログが最上位レベルになければそれらのダイアログを最上位まで移動する機能を与える API メソッドを開示します。

注: この機能は、Ignite UI for MVC Dialog では利用できません。

コード

以下のコードでは、第 2 のダイアログを最初のダイアログより前に表示するためのマークアップの定義方法を紹介します。

HTML の場合:

<div id="dialogBottom”>
    Parent HTML markup
</div>
<div id="dialogTop">
    Child HTML markup            
</div>

例

上のコードを使用し、追加でいくつか HTML コンテンツを定義すると、以下のスクリーンショットにあるような結果が得られます。イメージ ソースの詳細については、 このトピック最後の関連サンプルを参照してください。

複数の igDialog API

igDialog は、最上位のモーダルと非モーダル ダイアログへのアクセスを許可し、それらのダイアログが最上位レベルになければそれらのダイアログを最上位まで移動する機能を与える API メソッドを開示します。

メソッドの設定

以下の表は、目的の機能と、それを提示するメソッドとの対応表です。

コード

以下のコードでは、前述の igDialog メソッドを 1 つ呼び出す方法を紹介します。

$(“#dialog”).igDialog(“moveToTop”, e);

関連コンテンツ

トピック

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

• igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。

• igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。

サンプル

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

• API およびイベント : このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。