バージョン

igDialog 配置

トピックの概要

目的

このトピックでは、igDialog™ の配置方法を示します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

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

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

このトピックの内容

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

コントロールの構成の概要

次の表は、 igDialog コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。

構成可能な要素 詳細 プロパティ
igDialog 位置の構成 igDialog を配置するよう構成する必要があるプロパティ。 position
igDialog 積み重ね順の構成 ダイアログの積み重ね順を指定するプロパティ。 zIndex

igDialog 位置の構成

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 位置オブジェクトの例

以下のコードは、jQuery UI の .position() によってサポートされる特別に定義したオブジェクトを使用して igDialog をどのように配置できるかを示しています。

JavaScript の場合:

var dialogPosition = {
    my: “left top”,
    at: “left top”,
    of: window,
    offset: “100 200”
}
$("#dialog").igDialog({
    position: dialogPosition
});

igDialog 積み重ね順の構成

デフォルトで、ページ スタックの上部に igDialog ウィンドウが表示されます。そのデフォルト zIndex 値は 1000 です。これは、1000 より大きな値で他の DOM 要素を変更しない場合、ダイアログがページ上部に表示されます。要素を別の要素の上または下に表示するために、このデフォルト値を変更する場合は、zIndex 値を変更してこれを実行できます。

例

以下のコードは、zIndex を変更する方法を示しています。

JavaScript の場合:

$("#dialog").igDialog({
    zIndex: 1001
});

C# の場合:

<%= Html.Infragistics()
    .Dialog()
    .ZIndex(1001)
    .Render()
%>

関連コンテンツ

トピック

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

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

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

サンプル

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

  • API およびイベント: このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。

オンラインで表示: GitHub