このトピックでは、igDialog™ を固定または固定解除できるように構成する方法およびこれらのアクションの実行方法を示します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。
このトピックは、以下のセクションで構成されます。
igDialog が固定されると、その HTML コンテンツを含めたコントロール全体がオリジナルのコンテナーに移動し、ダイアログの絶対位置が削除されます。固定された igDialog はモーダルおよび最大化された状態をサポートせず、またこれは移動できません。
注: オリジナル
igDialogコンテナーの親要素が非表示の場合にダイアログが固定されると、ダイアログも非表示になります。
次の表は、 igDialog コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。
| 構成可能な要素 | 詳細 | プロパティとメソッド |
|---|---|---|
| 固定/固定解除の構成 | コントロール UI を使用して、igDialog の固定または固定解除を構成するのに必要なプロパティです。 | |
| 初期化の固定 | 状態が最小化に変更された場合に、その親に固定されるように igDialog を構成するプロパティです。 | pinOnMinimized |
| igDialog の固定 | 固定を可能にする igDialog API からのメソッド 。 | pin() |
| igDialog の固定解除 | 固定解除を可能にする igDialog API からのメソッド 。 | unpin() |
以下の表は、igDialog コントロールを固定するために構成する必要があるプロパティを示しています。showPinButton プロパティを設定すると ヘッダーのピン アイコンが有効になり、一方、pinned プロパティを設定するとコントロールの初期状態が構成されます。
以下の表では、目的の機能をプロパティ設定にマップしています。
| 目的: | 使用するプロパティ: | 設定の選択肢: |
|---|---|---|
| 固定ボタンを表示 | showPinButton | true |
| igDialog を固定 | pinned | true |
以下のスクリーンショットは、上記の設定の結果、igDialog がどのように表示されるかを示しています。ウィンドウはその親の左上隅に固定されます。
最小化されたときに常に固定されるように、igDialog を構成します。この例のような要求の場合、igDialog は構成されると 、最小化されます。
以下の表では、目的の機能をプロパティ設定にマップしています。
| 目的: | 使用するプロパティ: | 設定の選択肢: |
|---|---|---|
| 最小化して固定 | pinOnMinimized | true |
| igDialog の最小化 | state | minimized |
以下のスクリーンショットは、上記の設定の結果、igDialog がどのように表示されるかを示しています。ウィンドウは最小化され、その親の左上隅に固定されます。
前の項での構成の結果として、ウィンドウの固定が解除されているときにヘッダーの右上隅のボタンを押すことによって、ダイアログ ウィンドウを固定できます。showPinButton オプションが無効になっている場合、その API を使用してコントロールを固定できます。
以下のコードは、その API を使って igDialog を固定する方法を示しています。
JavaScript の場合:
$('#igDialog).igDialog("pin");
以下のスクリーンショットは、固定ボタンの位置を示しています。
前の項での構成の結果として、ウィンドウが固定されているときにヘッダーの右上隅のボタンを押すことによって、ダイアログ ウィンドウの固定を解除できます。showPinButton オプションが無効になっている場合、その API を使用してコントロールを固定解除できます。
以下のコードは、その API を使用して igDialog の固定を解除する方法を示しています。
JavaScript の場合:
$('#igDialog).igDialog("unpin");
以下のスクリーンショットは、固定解除ボタンの位置を示しています。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。
このトピックについては、以下のサンプルも参照してください。
igDialog のアイコンの表示方法を示すサンプル。オンラインで表示: GitHub