このトピックでは、igDialog
™ コントロールの主な機能を紹介します。
このトピックは、以下のセクションで構成されます。
HTML の場合:
<div id="dialog">
igDialog Content
</div>
以下の表では、コントロールの可能性のあるすべての状態をまとめていす。その他の詳細については関連トピックをご覧ください。
状態 | 説明 | 関連トピック |
---|---|---|
Opened | この状態では、igDialog は開いています。これがコントロールのデフォルト状態です。 | 表示と非表示 |
Closed | この状態では、igDialog は閉じています。 | 表示と非表示 |
Minimized | この状態では、igDialog は最小化されています。 | 最大化と最小化ウィンドウ |
Maximized | この状態では、igDialog は最大化されています。 | 最大化と最小化ウィンドウ |
以下の画像は、画像をコンテンツとして持つ igDialog
を示しています。コントロールは開いた状態です。
以下の表で、igDialog
コントロールの機能を簡単に説明します。詳細については、概要表の後をご覧ください。
機能 | 説明 |
---|---|
表示と非表示 | これは、特別なボタンとコントロール API を使用してダイアログ ウィンドウを表示または非表示にする機能です。 |
最大化と最小化 | これは、特別なボタンとコントロール API を使用してダイアログ ウィンドウを最小化または最大化する機能です。 |
固定 | これは、ダイアログ ウィンドウを左上端の親コンテナーに固定する機能です。 |
位置 | これは、親の位置とは関係なくページの任意の場所にダイアログ ウィンドウを配置する機能です。 |
ドラッグ | ページ全体でダイアログを移動する機能。 |
サイズ変更 | ダイアログのサイズを変更する機能。 |
ヘッダーとフッター | igDialog コントロールは、フッターおよびヘッダーを変更するプロパティおよびボタンとその画像を変更するプロパティを提案します。 |
キーボードのサポート | Esc キーでダイアログ ウィンドウを閉じる機能。 |
モーダル状態 | モーダル ダイアログの背後のページを無効にする機能。 |
複数のダイアログ | igDialog を入れ子でビルドする機能。 |
外部ページ | これは、igDialog のコンテンツとして外部ページを読み込む機能です。 |
アニメーション | アニメーションを選択する、開く、閉じる機能。 |
子へのフォーカス | フォーカスされた状態を維持するために、ダイアログ内の子要素の focus イベントと blur イベントを処理する機能を設定および取得します。 |
永続化 | この機能によって、サーバーへのポストバックが実行された後、igDialog の状態を保存できます。 |
主な機能として、ウィンドウ自体を表示または非表示にする機能があります。igDialog
を閉じるには、ユーザー インターフェイス ボタン、Esc キー、またはコントロール API を使用できます。非表示のボタンを再度開く場合、コントロール API のみ使用できます。この機能を実現するためのプロパティとメソッドの詳細については、以下のトピックとサンプルのリンクを参照してください。
関連トピック:
関連サンプル:
適切なボタンを使用することによって、igDialog
を最大化および最小化できます。コントロール API は、この動作を変更するためのプロパティとメソッドを提案します。また、ヘッダーをダブル クリックすると、Windows OS ウィンドウに似た動作を実行できます。この機能を実現するためのプロパティとメソッドの詳細については、以下のトピックとサンプルのリンクを参照してください。
関連トピック:
関連サンプル:
igDialog
は、左上隅にある親コンテナーに固定することができます。これによってウィンドウは移動しなくなりますが、サイズの変更は可能です。この機能の構成方法の詳細は、以下のトピックとサンプルを参照してください。
関連トピック:
関連サンプル:
igDialog
をドラッグ & ドロップできます。この動作をサポートするために変更が必要なプロパティは draggable
のみで、デフォルトで true に設定されています。
関連サンプル:
igDialog
をドラッグ & ドロップできます。この動作をサポートするために変更必要なプロパティは resizable
のみで、デフォルトで true に設定されています。
関連サンプル:
座標、および jQuery position メソッドを使用して、igDialog
の位置を設定できます。この機能の構成方法の詳細は、次のトピックとサンプルを参照してください。
関連トピック:
関連サンプル:
igDialog
コントロールは、フッターおよびヘッダーを変更するプロパティ、およびボタンとその画像を変更するプロパティを提案します。この機能の構成方法の詳細は、次のトピックとサンプルを参照してください。
関連トピック:
関連サンプル:
Esc キーで igDialog
を閉じることができます。この動作をサポートするために変更が必要なプロパティは closeOnEscape
のみで、デフォルトで true に設定されています。
関連トピック:
関連サンプル:
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
の高さ、幅、状態を設定する方法を紹介します。オンラインで表示: GitHub