このトピックでは、igDialog
™ の配置方法を示します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igDialog の概要: このトピックでは、igDialog
コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog
コントロールを Web ページに追加する方法について説明します。
このトピックは、以下のセクションで構成されます。
次の表は、 igDialog
コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。
構成可能な要素 | 詳細 | プロパティ |
---|---|---|
igDialog 位置の構成 |
igDialog を配置するよう構成する必要があるプロパティ。 |
position |
igDialog 積み重ね順の構成 |
ダイアログの積み重ね順を指定するプロパティ。 | zIndex |
igDialog
は、その親にしたがって配置できます。コントロール API には、動的に構成し、変更できる position
というプロパティがあります。以下の表は、このプロパティの使用方法と指定できる値を示します。
以下の表は、プロパティ position
で指定できる種類の形式を示しています。
書式 | 例 | タイプ |
---|---|---|
{ left: leftPos, top: topPos } | { left: 100, top: 200 } | JavaScript オブジェクト |
{ my: “position”, at: “position”, of: “parent”, offset: “left top”, collision: “alternative position” using: function(){} } |
{ my: “left top”, at: “left top”, of: window, offset: “100 200”} | object (jQuery UI position() メソッドでサポート) |
以下のコードは、オブジェクトを使用して igDialog
をどのように配置できるかを示しています。
JavaScript の場合:
$("#dialog").igDialog({
position: { left: 100, top: 200 }
});
C# の場合:
<%= Html.Infragistics()
.Dialog()
.Position(100,200)
.Render()
%>
以下のコードは、jQuery UI の .position()
によってサポートされる特別に定義したオブジェクトを使用して igDialog
をどのように配置できるかを示しています。
JavaScript の場合:
var dialogPosition = {
my: “left top”,
at: “left top”,
of: window,
offset: “100 200”
}
$("#dialog").igDialog({
position: dialogPosition
});
デフォルトで、ページ スタックの上部に igDialog
ウィンドウが表示されます。そのデフォルト zIndex
値は 1000 です。これは、1000 より大きな値で他の DOM 要素を変更しない場合、ダイアログがページ上部に表示されます。要素を別の要素の上または下に表示するために、このデフォルト値を変更する場合は、zIndex
値を変更してこれを実行できます。
以下のコードは、zIndex
を変更する方法を示しています。
JavaScript の場合:
$("#dialog").igDialog({
zIndex: 1001
});
C# の場合:
<%= Html.Infragistics()
.Dialog()
.ZIndex(1001)
.Render()
%>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igDialog の概要: このトピックでは、igDialog
コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog
コントロールを Web ページに追加する方法について説明します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub