このトピックでは、igDialog™ を構成して開閉できるようにする手順と、開閉アクションの実行方法を示します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。
次の表は、 igDialog コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。
| 構成可能な要素 | 詳細 | プロパティとメソッド |
|---|---|---|
| 閉じることのできるコントロールとして igDialog を構成する | igDialog コントロールをこのコントロール自体の UI からクローズできるようにするために構成する必要のあるプロパティです。 | |
| igDialog を非表示にする | igDialog コントロールをこのコントロール自体の API からを閉じるようにするメソッドです。 | |
| igDialog を表示する | igDialog コントロールをこのコントロール自体の API からを開くようにするメソッドです。 |
igDialog コントロールをこのコントロール自体の UI からクローズできるようにするために構成する必要のあるプロパティを下の表に示します。デフォルトでは、両方のプロパティが希望の値に設定されます。
次の表は、表示/非表示機能の設定とプロパティの設定値との対応関係を示したものです。
| 目的: | 使用するプロパティ: | 設定の選択肢: |
|---|---|---|
| [閉じる] ボタンを表示する | showCloseButton | true |
| キーボードを使用して igDialog を閉じる | closeOnEscape | true |
下のスクリーンショットは、上記の設定を行った場合に表示される igDialog です。
上のパラグラフで示した構成を行うと、ヘッダーの右上隅にあるボタンでダイアログ ウィンドウをクローズできるようになります。下の表に示す手順に従ってコントロールを構成すれば、Esc キーを使用してコントロールを閉じるようにすることもできます。
showCloseButton と closeOnEscape の両方を無効にした場合、このコントロールをコントロール自体の API を使用して非表示にできます。
次のコードは、igDialog をその API を使用して閉じる方法を示したものです。
JavaScript の場合:
$('#igDialog).igDialog("close");
このスクリーンショットは、[閉じる] ボタンの位置を示しています。
igDialog は、その API を使用する以外の方法では表示できません。
次のコードは、igDialog をその API を使用して表示する方法を示したものです。
JavaScript の場合:
$('#igDialog).igDialog("open");
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。
このトピックについては、以下のサンプルも参照してください。
igDialog の高さ、幅、状態を設定する方法を紹介します。オンラインで表示: GitHub