igDialog の概要

トピックの概要

目的

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

このトピックの内容

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

• 概要
  • igDialog の概要
  • 状態
  • 例
• 機能
  • 表示と非表示
  • 最大化と最小化
  • 固定
  • ドラッグ
  • サイズ変更
  • 位置
  • ヘッダーとフッター
  • キーボードのサポート
  • モーダル状態
  • 複数のダイアログ
  • 外部ページ
  • アニメーション
  • 子へのフォーカス
  • 永続化
• 関連コンテンツ
  • トピック
  • サンプル

概要

igDialog の概要

HTML の場合:

<div id="dialog">
    igDialog Content
</div>

状態

以下の表では、コントロールの可能性のあるすべての状態をまとめていす。その他の詳細については関連トピックをご覧ください。

例

以下の画像は、画像をコンテンツとして持つ igDialog を示しています。コントロールは開いた状態です。

機能

機能の概要

以下の表で、igDialog コントロールの機能を簡単に説明します。詳細については、概要表の後をご覧ください。

表示と非表示

主な機能として、ウィンドウ自体を表示または非表示にする機能があります。igDialog を閉じるには、ユーザー インターフェイス ボタン、Esc キー、またはコントロール API を使用できます。非表示のボタンを再度開く場合、コントロール API のみ使用できます。この機能を実現するためのプロパティとメソッドの詳細については、以下のトピックとサンプルのリンクを参照してください。

関連トピック:

• igDialog の表示と非表示

関連サンプル:

• 基本的な使用方法

最大化と最小化

適切なボタンを使用することによって、igDialog を最大化および最小化できます。コントロール API は、この動作を変更するためのプロパティとメソッドを提案します。また、ヘッダーをダブル クリックすると、Windows OS ウィンドウに似た動作を実行できます。この機能を実現するためのプロパティとメソッドの詳細については、以下のトピックとサンプルのリンクを参照してください。

関連トピック:

• igDialog の最大化および最小化

関連サンプル:

• アイコン

固定

igDialog は、左上隅にある親コンテナーに固定することができます。これによってウィンドウは移動しなくなりますが、サイズの変更は可能です。この機能の構成方法の詳細は、以下のトピックとサンプルを参照してください。

関連トピック:

• igDialog の固定

関連サンプル:

• アイコン

ドラッグ

igDialog をドラッグ & ドロップできます。この動作をサポートするために変更が必要なプロパティは draggable のみで、デフォルトで true に設定されています。

関連サンプル:

• 基本的な使用方法

サイズ変更

igDialog をドラッグ & ドロップできます。この動作をサポートするために変更必要なプロパティは resizable のみで、デフォルトで true に設定されています。

関連サンプル:

• 基本的な使用方法

位置

座標、および jQuery position メソッドを使用して、igDialog の位置を設定できます。この機能の構成方法の詳細は、次のトピックとサンプルを参照してください。

関連トピック:

• igDialog の配置

関連サンプル:

• API およびイベント

ヘッダーとフッター

igDialog コントロールは、フッターおよびヘッダーを変更するプロパティ、およびボタンとその画像を変更するプロパティを提案します。この機能の構成方法の詳細は、次のトピックとサンプルを参照してください。

関連トピック:

• igDialog のヘッダーとフッター

関連サンプル:

• アイコン

キーボードのサポート

Esc キーで igDialog を閉じることができます。この動作をサポートするために変更が必要なプロパティは closeOnEscape のみで、デフォルトで true に設定されています。

関連トピック:

• Dialog ウィンドウの表示と非表示

関連サンプル:

• 基本的な使用方法

モーダル状態

igDialog がモーダル状態にある場合、背景のページは非表示および無効になります。igDialog コントロールを操作するだけです。この機能の構成方法の詳細は、次のトピックとサンプルを参照してください。

関連トピック:

• モーダル igDialog

関連サンプル:

• モーダル ダイアログ

複数のダイアログ

複数の igDialog ウィジェットをページ上に表示することができ、ウィジェット間の関係を定義する必要なく、これらは適切に表示されます。通常の igDialog とモーダル ダイアログを組み合わせて使用することもできます。詳細については、以下のサンプルとトピックを参照してください。

関連トピック:

• 複数の igDialog

外部ページ

igDialog は、ページ全体をコンテンツとして扱うことができます。この機能の構成方法の詳細は、次のトピックとサンプルを参照してください。

関連トピック:

• 外部ダイアログ

関連サンプル:

• 外部ページの読み込み

アニメーション

igDialog では、オープン、クローズ時のアニメーションを選択できます。この機能の構成方法の詳細は、次のトピックとサンプルを参照してください。

関連トピック:

• igDialog のアニメート

フォーカス

コントロール自身、およびダイアログ内の子要素の focus イベントおよび blur イベントを処理する機能を設定および取得します。この動作をサポートするために変更が必要なプロパティは trackFocus のみで、デフォルトで true に設定されています。

永続化

この機能によって、サーバーへのポストバックが実行された後、igDialog の状態を保存できます。Persistence が有効な場合、igDialog の幅、高さ、位置、zIndex、固定位置および状態を保存する機能を使用できます。オーバーロード Dialog() コンストラクターの 1 つを使用する場合、この機能が有効になります。このコンストラクターでは、2 番目のパラメーターとして、文字列の名前を渡す必要があり、これは igDialog の設定を保持する非表示の入力の名前になります。コントロールは、サーバーへのコール中、igDialog の状態を存続させるために、この非表示のフィールドを使用します。Dialog() オーバーロードの詳細については、Dialog の API マニュアルを参照してください。

igDialog の永続性を有効にするには、以下のコードを使用します。

C# の場合:

@Html.Infragistics()
    .Dialog("igDialog1", "hdnPersistnceInput")
    .Render()

関連コンテンツ

トピック

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

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

• igDialog の構成: このトピックでは、すべての主な igDialog の機能、その構成および使用方法を参照します。

• igDialog API 参照: このトピックでは、igDialog API のカテゴリーを紹介します。コントロール プロパティ、メソッド、イベントおよび CSS クラスへのすべての参照に加え、API 使用時のいくつかの具体例が含まれています。

• igDialog の既知の問題と制限: このトピックでは、igDialog コントロールに関する既知の問題を明らかにします。

サンプル

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

• 基本的な使用方法: このサンプルでは、igDialog の高さ、幅、状態を設定する方法を紹介します。