ui.igDialog

ui.igDialog_image

igDialogWindow は、ページでモダルおよび非モダル ダイアログを開くことが可能なコンポーネントです。各ダイアログで閉じる、固定、最大化、最小化などの動作が利用可能です。

この API のクラス、オプション、イベント、メソッド、およびテーマの詳細は、上記の関連するタブの下に表示されます。

次のコード スニペットは igDialogWindow コントロールの初期化方法を示しています。

igDialogWindow コントロールに必要なスクリプトおよびテーマの参照方法についての詳細は、 Ignite UI での JavaScript リソースの使用および Ignite UI のスタイルとテーマの設定をお読みください。

コード サンプル

 
<!doctype html>
<html>
<head>
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Loader Script -->
    <script src="js/infragistics.loader.js" type="text/javascript"></script>
    <!-- Infragistics Loader Initialization -->
    <script type="text/javascript">
        $.ig.loader({
            scriptPath: "js/",
            cssPath: "css/",
            resources: "igDialog"
        });
        
        $.ig.loader(function () {
		    // Initialize the igDialog
            $("#dialog").igDialog({
                state: "opened",
                height: 460,
                width: 440
            });
        });
    </script>
</head>
<body>
    <div id="dialog"></div>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jqueryui/1.8.11/jquery-ui.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
jquery.ui.resizable.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js

継承

  • closeAnimation

    タイプ:
    object
    デフォルト:
    null

    閉じている時にダイアログに適用されるアニメーションを設定、取得します。これは、jquery hide(param) メソッドがサポートする任意のオブジェクトになり得ます。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					closeAnimation : "slide"
				});

				//Get
				var animation = $(".selector").igDialog("option", "closeAnimation");

				//Set
				$(".selector").igDialog("option", "closeAnimation", "slide");

  • closeButtonTitle
    削除

    タイプ:
    string
    デフォルト:
    ""

    このオプションは 2017.2 バージョン以降サポートされません。
    ダイアログの閉じるボタンのタイトル/ツールチップを取得または設定します。 locale.closeButtonTitle オプションを使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					closeButtonTitle : "X"
				});

				//Get
				var title = $(".selector").igDialog("option", "closeButtonTitle");

				//Set
				$(".selector").igDialog("option", "closeButtonTitle", "X");

  • closeOnEscape

    タイプ:
    bool
    デフォルト:
    true

    Esc キーが押されたときにダイアログを閉じるかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					closeOnEscape : false
				});

				//Get
				var closeDialogOnEscape = $(".selector").igDialog("option", "closeOnEscape");

				//Set
				$(".selector").igDialog("option", "closeOnEscape", false);

  • container

    タイプ:
    object
    デフォルト:
    null

    ダイアログのコンテナ HTML 要素を設定、取得します。
    これは、HTML 要素、jquery セレクター、または jquery オブジェクトへの参照になり得ます。
    デフォルトでは、元のターゲット要素の親フォームが使用されます。フォームが見つからない場合は、ボディが使用されます。
    注: コンテナーの position が設定されないか、static に設定される場合、position は relative に設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					container : objContainer
				});

				//Get
				var objContainer = $(".selector").igDialog("option", "container");

  • dialogClass

    タイプ:
    string
    デフォルト:
    null

    ダイアログの DIV 要素に適用される css クラスの名前を取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					dialogClass : "myClass"
				});

				//Get
				var myClass = $(".selector").igDialog("option", "dialogClass");

  • draggable

    タイプ:
    bool
    デフォルト:
    true

    エンド ユーザーによるダイアログのドラッグ機能を設定、取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					draggable : false
				});

				//Get
				var isDraggable = $(".selector").igDialog("option", "draggable");

				//Set
				$(".selector").igDialog("option", "draggable", false);

  • enableDblclick

    タイプ:
    enumeration
    デフォルト:
    auto

    dialog-header で dblclick の処理を取得または設定します。 オプションが false ではなく、ダイアログが最小化された場合、状態を標準に設定します。
    オプションが 'auto' に設定されていて、showMaximizeButton が有効またはオプションを true に設定する場合、ダイアログが標準状態の場合は最大化され、最大状態の場合は標準状態になります。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					enableDblclick : false
				});
				//Get
				var doubleClick = $(".selector").igDialog("option", "enableDblclick");
				//Set
				$(".selector").igDialog("option", "enableDblclick", false);

  • enableHeaderFocus

    タイプ:
    bool
    デフォルト:
    true

    フォーカスあり、およびフォーカスなしの状態によって、ヘッダーの状態を調整する機能を設定、取得します。注: 「trackFocus」オプションを有効にします。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					enableHeaderFocus : false
				});

				//Get
				var hasHeaderFocus = $(".selector").igDialog("option", "enableHeaderFocus");

				//Set
				$(".selector").igDialog("option", "enableHeaderFocus", false);

  • footerText

    タイプ:
    string
    デフォルト:
    null

    ダイアログのフッターに現れるテキストを設定、取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					footerText : "FOOTER"
				});

				//Get
				var text = $(".selector").igDialog("option", "footerText");

				//Set
				$(".selector").igDialog("option", "footerText", "FOOTER");

  • headerText

    タイプ:
    string
    デフォルト:
    null

    ダイアログのヘッダーに現れるテキストを設定、取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					headerText : "HEADER"
				});

				//Get
				var text = $(".selector").igDialog("option", "headerText");

				//Set
				$(".selector").igDialog("option", "headerText", "HEADER");

  • height

    タイプ:
    enumeration
    デフォルト:
    null

    通常の状態でのダイアログの初期高さ (ピクセル単位) を設定、取得します。
    数値以外に、次の単位がサポートされています: 「px」、「em」および「%」。
    「%」の場合、ブラウザのウィンドウ サイズが使用され、これは開くアクションのみに有効です。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					height : 500
				});
				//Get
				var height = $(".selector").igDialog("option", "height");
				//Set
				$(".selector").igDialog("option", "height", 500);

  • imageClass

    タイプ:
    string
    デフォルト:
    null

    ヘッダーの左端に配置される SPAN 要素に適用される css クラスの名前を取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					imageClass : "dialog-header-image"
				});

				//Get
				var class = $(".selector").igDialog("option", "imageClass");

  • language
    継承

    タイプ:
    string
    デフォルト:
    "en"

    ウィジェットのロケール言語設定を取得または設定します。

    コード サンプル

     
					//Initialize
				$(".selector").igDialog({
					language: "ja"
				});

				// Get
				var language = $(".selector").igDialog("option", "language");

				// Set
				$(".selector").igDialog("option", "language", "ja");

  • locale

    タイプ:
    object
    デフォルト:
    {}

    • closeButtonTitle

      タイプ:
      string
      デフォルト:
      ""

      ダイアログの閉じるボタンのタイトル/ツールチップを取得または設定します。

      コード サンプル

       
				//Initialize
				$(".selector").igDialog({
					locale: {
						closeButtonTitle : "Close"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").closeButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { closeButtonTitle: "Close"});

    • maximizeButtonTitle

      タイプ:
      string
      デフォルト:
      ""

      ダイアログの最大化ボタンのタイトル/ツールチップを取得または設定します。

      コード サンプル

       
				//Initialize
				$(".selector").igDialog({
					locale: {
						maximizeButtonTitle : "Maximize"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").maximizeButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { maximizeButtonTitle: "Maximize"});

    • minimizeButtonTitle

      タイプ:
      string
      デフォルト:
      ""

      ダイアログの最小化ボタンのタイトル/ツールチップを取得または設定します。

      コード サンプル

       
				//Initialize
				$(".selector").igDialog({
					locale: {
						minimizeButtonTitle : "Minimize"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").minimizeButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { minimizeButtonTitle: "Minimize"});

    • pinButtonTitle

      タイプ:
      string
      デフォルト:
      ""

      ダイアログのピン固定ボタンのタイトル/ツールチップを取得または設定します。

      コード サンプル

       
				//Initialize
				$(".selector").igDialog({
					locale: {
						pinButtonTitle : "Pin"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").pinButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { pinButtonTitle: "Pin"});

    • restoreButtonTitle

      タイプ:
      string
      デフォルト:
      ""

      ダイアログの元に戻すボタンのタイトル/ツールチップを取得または設定します。

      コード サンプル

       
				//Initialize
				$(".selector").igDialog({
					locale: {
						restoreButtonTitle : "Restore"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").restoreButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { restoreButtonTitle: "Restore"});

    • unpinButtonTitle

      タイプ:
      string
      デフォルト:
      ""

      ダイアログのピン固定ボタンのタイトル/ツールチップを取得または設定します。

      コード サンプル

       
				//Initialize
				$(".selector").igDialog({
					locale: {
						unpinButtonTitle : "Unpin"
					}
				});

				//Get
				var text = $(".selector").igDialog("option", "locale").unpinButtonTitle;

				//Set
				$(".selector").igDialog("option", "locale", { unpinButtonTitle: "Unpin"});

  • mainElement

    タイプ:
    domelement
    デフォルト:
    null

    ダイアログのメイン コンテナーとして使用される jQuery DIV オブジェクトを取得します。
    注:
    1.オブジェクトはオプションで、子を含みません。
    2.親はありません。
    3.ダイアログのレイアウトまたは外観を変更する属性を含みません。
    4.オプションの変更はサポートされません。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					mainElement : objContainer
				});

				//Get
				var objContainer = $(".selector").igDialog("option", "mainElement");

  • maxHeight

    タイプ:
    number
    デフォルト:
    null

    通常の状態でのダイアログの最大高さを設定、取得します。注: このオプションは、エンド ユーザーがダイアログのサイズを変更する時にのみ有効です。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					maxHeight : 1000
				});

				//Get
				var maxHeight = $(".selector").igDialog("option", "maxHeight");

				//Set
				$(".selector").igDialog("option", "maxHeight", 1000);

  • maximizeButtonTitle
    削除

    タイプ:
    string
    デフォルト:
    ""

    このオプションは 2017.2 バージョン以降サポートされません。
    ダイアログの最大化ボタンのタイトル/ツールチップを取得または設定します。 locale.minimizeButtonTitle オプションを使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					maximizeButtonTitle : "MAX"
				});

				//Get
				var title = $(".selector").igDialog("option", "maximizeButtonTitle");

				//Set
				$(".selector").igDialog("option", "maximizeButtonTitle", "MAX");

  • maxWidth

    タイプ:
    number
    デフォルト:
    null

    通常の状態でのダイアログの最大幅を設定、取得します。注: このオプションは、エンド ユーザーがダイアログのサイズを変更する時にのみ有効です。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					maxWidth : 1000
				});

				//Get
				var maxWidth = $(".selector").igDialog("option", "maxWidth");

				//Set
				$(".selector").igDialog("option", "maxWidth", 1000);

  • minHeight

    タイプ:
    number
    デフォルト:
    100

    通常の状態でのダイアログの最小高さを設定、取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					minHeight : 100
				});

				//Get
				var minHeight = $(".selector").igDialog("option", "minHeight");

				//Set
				$(".selector").igDialog("option", "minHeight", 100);

  • minimizeButtonTitle
    削除

    タイプ:
    string
    デフォルト:
    ""

    このオプションは 2017.2 バージョン以降サポートされません。
    ダイアログの最小化ボタンのタイトル/ツールチップを取得または設定します。 locale.minimizeButtonTitle オプションを使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					minimizeButtonTitle : "MIN"
				});

				//Get
				var title = $(".selector").igDialog("option", "minimizeButtonTitle");

				//Set
				$(".selector").igDialog("option", "minimizeButtonTitle", "MIN");

  • minWidth

    タイプ:
    number
    デフォルト:
    150

    通常の状態でのダイアログの最小幅を設定、取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					minWidth : 100
				});

				//Get
				var minWidth = $(".selector").igDialog("option", "minWidth");

				//Set
				$(".selector").igDialog("option", "minWidth", 100);

  • modal

    タイプ:
    bool
    デフォルト:
    false

    ダイアログのモード状態を設定、取得します。
    2 つ以上のモーダル igDialog がある場合、最後に開いたダイアログは前景に表示されます。
    注: モーダル機能は、ダイアログが最小化またはピン固定された場合に正しく動作しないため、サポートされません。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					modal : true
				});

				//Get
				var isModal = $(".selector").igDialog("option", "modal");

				//Set
				$(".selector").igDialog("option", "modal", true);

  • openAnimation

    タイプ:
    object
    デフォルト:
    null

    開いている時にダイアログに適用されるアニメーションを設定、取得します。これは、jquery show(param) メソッドがサポートする任意のオブジェクトになり得ます。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					openAnimation : "explode"
				});

				//Get
				var animation = $(".selector").igDialog("option", "openAnimation");

				//Set
				$(".selector").igDialog("option", "openAnimation", "explode");

  • pinButtonTitle
    削除

    タイプ:
    string
    デフォルト:
    ""

    このオプションは 2017.2 バージョン以降サポートされません。
    ダイアログのピン固定ボタンのタイトル/ツールチップを取得または設定します。 locale.pinButtonTitle オプションを使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					pinButtonTitle : "PIN"
				});

				//Get
				var tilte = $(".selector").igDialog("option", "pinButtonTitle");

				//Set
				$(".selector").igDialog("option", "pinButtonTitle", "PIN");

  • pinned

    タイプ:
    bool
    デフォルト:
    false

    ダイアログの固定状態を設定、取得します。
    ダイアログが固定される場合、ダイアログの HTML 要素は、ターゲット要素が配置される元のコンテナーに移動され、position:absolute は削除されます。
    固定されたダイアログはモーダル状態および最大化された状態をサポートせず、またこれは移動できません。
    注:
    1.元の target-element の親要素が非表示の場合、固定ダイアログも非表示になります。
    2.固定状態はモーダル ダイアログでサポートされません。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					pinned : true
				});

				//Get
				var isPinned = $(".selector").igDialog("option", "pinned");

				//Set
				$(".selector").igDialog("option", "pinned", true);

  • pinOnMinimized

    タイプ:
    bool
    デフォルト:
    false

    ダイアログは最小化でピン固定されるかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					pinOnMinimized : true
				});

				//Get
				var pinDialogOnMinimized = $(".selector").igDialog("option", "pinOnMinimized");

				//Set
				$(".selector").igDialog("option", "pinOnMinimized", true);

  • position

    タイプ:
    object
    デフォルト:
    null

    ダイアログの初期位置を設定、取得します。「top」および「left」メンバーを含むオブジェクトです。
    jquery.position(param) メソッドによってサポートされます。例: { left: 100, top: 200 }、{ my: "left top", at: "left top", offset: "100 200" }。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					position : { left: 100, top: 200 }
				});

				//Get
				var position = $(".selector").igDialog("option", "position");

				//Set
				$(".selector").igDialog("option", "position", { left: 100, top: 200 });

  • regional
    継承

    タイプ:
    enumeration
    デフォルト:
    en-US

    ウィジェットの領域設定を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igDialog("option", "regional");
				// Set
				$(".selector").igDialog("option", "regional", "ja");

  • resizable

    タイプ:
    bool
    デフォルト:
    true

    エンド ユーザーによるダイアログのサイズ変更機能を設定、取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					resizable : false
				});

				//Get
				var isResizable = $(".selector").igDialog("option", "resizable");

				//Set
				$(".selector").igDialog("option", "resizable", false);

  • restoreButtonTitle
    削除

    タイプ:
    string
    デフォルト:
    ""

    このオプションは 2017.2 バージョン以降サポートされません。
    ダイアログの元に戻すボタンのタイトル/ツールチップを取得または設定します。 locale.restoreButtonTitle オプションを使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					restoreButtonTitle : "RESTORE"
				});

				//Get
				var title = $(".selector").igDialog("option", "restoreButtonTitle");

				//Set
				$(".selector").igDialog("option", "restoreButtonTitle", "RESTORE");

  • showCloseButton

    タイプ:
    bool
    デフォルト:
    true

    ダイアログ ヘッダーの閉じるボタンを表示するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					showCloseButton : false
				});

				//Get
				var showDialogCloseButton = $(".selector").igDialog("option", "showCloseButton");

				//Set
				$(".selector").igDialog("option", "showCloseButton", false);

  • showFooter

    タイプ:
    bool
    デフォルト:
    false

    ダイアログ フッターを表示するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					showFooter : true
				});

				//Get
				var showDialogFooter = $(".selector").igDialog("option", "showFooter");

				//Set
				$(".selector").igDialog("option", "showFooter", true);

  • showHeader

    タイプ:
    bool
    デフォルト:
    true

    ダイアログ ヘッダーを表示するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					showHeader : false
				});

				//Get
				var showDialogHeader = $(".selector").igDialog("option", "showHeader");

				//Set
				$(".selector").igDialog("option", "showHeader", false);

  • showMaximizeButton

    タイプ:
    bool
    デフォルト:
    false

    ダイアログ ヘッダーの最大化ボタンを表示するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					showMaximizeButton : true
				});

				//Get
				var showDialogMaximizeButton = $(".selector").igDialog("option", "showMaximizeButton");

				//Set
				$(".selector").igDialog("option", "showMaximizeButton", true);

  • showMinimizeButton

    タイプ:
    bool
    デフォルト:
    false

    ダイアログ ヘッダーの最小化ボタンを表示するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					showMinimizeButton : true
				});

				//Get
				var showDialogMinimizeButton = $(".selector").igDialog("option", "showMinimizeButton");

				//Set
				$(".selector").igDialog("option", "showMinimizeButton", true);

  • showPinButton

    タイプ:
    bool
    デフォルト:
    false

    ダイアログ ヘッダーのピン固定ボタンを表示するかどうかを取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					showPinButton : true
				});

				//Get
				var showDialogPinButton = $(".selector").igDialog("option", "showPinButton");

				//Set
				$(".selector").igDialog("option", "showPinButton", true);

  • state

    タイプ:
    enumeration
    デフォルト:
    opened

    ダイアログの状態を取得または設定します。 注: ダイアログがモーダルの場合、誤った動作をトリガーするため、ピン固定および最小化状態はサポートされません。

    メンバー

    • opened
    • タイプ:string
    • ダイアログが開きます。
    • minimized
    • タイプ:string
    • ダイアログが最小化されます。
    • maximized
    • タイプ:string
    • ダイアログが最大化されます。
    • closed
    • タイプ:string
    • ダイアログが閉じます。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					state : "maximized"
				});
				//Get
				var state = $(".selector").igDialog("option", "state");
				//Set
				$(".selector").igDialog("option", "state", "maximized");

  • tabIndex

    タイプ:
    number
    デフォルト:
    0

    ダイアログのメイン HTML 要素に適用される tabIndex 属性の値を設定、取得します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					tabIndex : 1
				});

				//Get
				var state = $(".selector").igDialog("option", "tabIndex");

				//Set
				$(".selector").igDialog("option", "tabIndex", 1);

  • temporaryUrl

    タイプ:
    string
    デフォルト:
    null

    src の一時的な値を設定、取得します。IFRAME のインスタンスの場合に、ベース要素の親を変更する間に使用されます。IE で発生する可能性のある javascript 例外を回避できます。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					temporaryUrl : "http://infragistics.com"
				});

				//Get
				var url = $(".selector").igDialog("option", "http://infragistics.com");

  • trackFocus

    タイプ:
    bool
    デフォルト:
    true

    フォーカスがある状態を維持するために、ダイアログに配置された子要素の focus および blur イベントを処理する機能を設定、取得します。
    注:
    このオプションが有効な場合、focus および blur イベント ハンドラーが、ダイアログのすべての子要素に追加されます。
    ダイアログがモーダルである、または最大化できる場合、このオプションの無効化は推奨されません。
    このオプションは、igDialog が作成した後に変更された場合、ダイアログの現在状態に基づいて、一時的に closed-opened または opened-closed になります。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					trackFocus : false
				});

				//Get
				var trackDialogFocus = $(".selector").igDialog("option", "trackFocus");

				//Set
				$(".selector").igDialog("option", "trackFocus", false);

  • unpinButtonTitle
    削除

    タイプ:
    string
    デフォルト:
    ""

    このオプションは 2017.2 バージョン以降サポートされません。
    ダイアログのピン固定解除ボタンのタイトル/ツールチップを取得または設定します。 locale.unpinButtonTitle オプションを使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					unpinButtonTitle : "UNPIN"
				});

				//Get
				var title = $(".selector").igDialog("option", "unpinButtonTitle");

				//Set
				$(".selector").igDialog("option", "unpinButtonTitle", "UNPIN");

  • width

    タイプ:
    enumeration
    デフォルト:
    300

    通常の状態でのダイアログの初期幅 (ピクセル単位) を設定、取得します。
    数値以外に、次の単位がサポートされています: 「px」、「em」および「%」。
    「%」の場合、ブラウザのウィンドウ サイズが使用され、これは開くアクションのみに有効です。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					width : 500
				});
				//Get
				var width = $(".selector").igDialog("option", "width");
				//Set
				$(".selector").igDialog("option", "width", 500);

  • zIndex

    タイプ:
    number
    デフォルト:
    null

    ダイアログのメイン HTML 要素に適用される zIndex の値を設定、取得します。値が設定されていない場合は、1000 が使用されます。

    コード サンプル

     
				//Initialize
				$(".selector").igDialog({
					zIndex : 1001
				});

				//Get
				var zIndex = $(".selector").igDialog("option", "zIndex");

				//Set
				$(".selector").igDialog("option", "zIndex", 1001);

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

  • animationEnded

    キャンセル可能:
    false

    ダイアログが閉じていた、または開いていた時の、最後のアニメーションの後に発生するイベント。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、igDialog への参照を取得します。
    ui.action を使用して、アニメーションを起動させたアクション名を取得します。
    「open」- ダイアログが開きました
    「close」- ダイアログが閉じました。

    コード サンプル

     
				//Bind after initialization
				$(document).delegate(".selector", "igdialoganimationended", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner

					// Obtain one of the following dialog actions:
					//  - "open"
					//  - "close"
					ui.action
				});

				//Initialize
				$(".selector").igDialog({
					animationEnded : function(evt, ui) {...}
				});

  • blur

    キャンセル可能:
    false

    ダイアログまたはそのコンテンツがフォーカスを失ったとき発生するイベント。
    関数は引数 evt および ui を受け取ります。
    evt を使用してブラウザ イベントを取得します。
    ui.owner を使用して、igDialog への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).delegate(".selector", "igdialogblur", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner
				});

				//Initialize
				$(".selector").igDialog({
					blur : function(evt, ui) {...}
				});

  • focus

    キャンセル可能:
    false

    ダイアログまたはそのコンテンツがフォーカスを得たとき発生するイベント。
    関数は引数 evt および ui を受け取ります。
    evt を使用してブラウザ イベントを取得します。
    ui.owner を使用して、igDialog への参照を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).delegate(".selector", "igdialogfocus", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner
				});

				//Initialize
				$(".selector").igDialog({
					focus : function(evt, ui) {...}

  • stateChanged

    キャンセル可能:
    false

    ダイアログの状態が変更された後に発生するイベント。
    関数は引数 evt および ui を受け取ります。
    evt を使用してブラウザ イベントを取得します。状態がコードから修正された場合、このパラメーターは null になり得ます。
    ui.owner を使用して、igDialog への参照を取得します。
    ui.button を使用して、イベントを発生させたボタン名を取得します。注: 状態がコードから修正された場合、「button」に下線が引かれます。
    ui.oldState を使用して、ダイアログの古い状態を取得します。これは次のいずれかになり得ます: 「opened」、「minimized」、「maximized」、「closed」。
    ui.oldPinned を使用して、ダイアログの古い固定状態のブール値を取得します。
    ui.action を使用して、アクション名を取得します。これは以下の内のいずれかになり得ます。
    「open」- ダイアログが開きました。注: 考えられる「openAnimation」の開始前にイベントが発生します。
    「close」- ダイアログが閉じました。注: 考えられる「closeAnimation」の開始前にイベントが発生します。
    「minimize」- ダイアログが最小化されました
    「maximize」- ダイアログが最大化されました
    「復元」 - 最小化または最大化の状態からダイアログが復元されました
    「pin」- ダイアログが固定されました
    「unpin」- ダイアログの固定が解除されました。

    コード サンプル

     
				//Bind after initialization
				$(document).delegate(".selector", "igdialogstatechanged", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner

					// Obtain the name of the button, which triggers the event. If the igDialog state was modified from the code, using the control API, then the "button" property is undefined.
					ui.button

					// Obtain the old state of the igDialog. The possible values are: "opened", "minimized", "maximized", "closed".
					ui.oldState

					// Obtain if the old state of the igDialog was pinned.
					ui.oldPinned

					// Obtain one of the following dialog actions:
					//  - "open"
					//  - "close"
					//  - "minimize"
					//  - "maximize"
					//  - "restpore"
					//  - "pin"
					//  - "unpin"
					ui.action
				});

				//Initialize
				$(".selector").igDialog({
					stateChanged : function(evt, ui) {...}
				});

  • stateChanging

    キャンセル可能:
    true

    ダイアログの状態が変更される前に発生するイベント。
    アクションをキャンセルするには、false を返します。
    関数は引数 evt および ui を受け取ります。
    evt を使用してブラウザ イベントを取得します。状態がコードから修正された場合、このパラメーターは null になり得ます。
    ui.owner を使用して、igDialog への参照を取得します。
    ui.button を使用して、イベントを発生させたボタン名を取得します。注: 状態がコードから修正された場合、「button」に下線が引かれます。
    ui.oldState を使用して、ダイアログの古い状態を取得します。これは次のいずれかになり得ます: 「opened」、「minimized」、「maximized」、「closed」。
    ui.oldPinned を使用して、ダイアログの古い固定状態のブール値を取得します。
    ui.action を使用して、アクション名を取得します。これは以下の内のいずれかになり得ます。
    「open」 - ダイアログを開くリクエスト
    「close」 - ダイアログを閉じるリクエスト
    「minimize」 - ダイアログを最小化するリクエスト
    「maximize」 - ダイアログを最大化するリクエスト
    「復元」 - 最小化または最大化の状態からダイアログを復元するリクエスト
    「pin」 - ダイアログを固定するリクエスト
    「unpin」 - ダイアログの固定を解除するリクエスト

    コード サンプル

     
				//Bind after initialization
				$(document).delegate(".selector", "igdialogstatechanging", function (evt, ui) {
					//return the triggered browser event
					evt;

					// Reference to the igDialog widget.
					ui.owner

					// Obtain the name of button, which triggers the event. If the igDialog state was modified from the code, using control API, then the "button" property is undefined.
					ui.button

					// Obtain the old state of the igDialog. The possible values are: "opened", "minimized", "maximized", "closed".
					ui.oldState

					// Obtain if the old state of the igDialog was pinned.
					ui.oldPinned

					// Obtain one of the following dialog actions:
					//  - "open"
					//  - "close"
					//  - "minimize"
					//  - "maximize"
					//  - "restpore"
					//  - "pin"
					//  - "unpin"
					ui.action
				});

				//Initialize
				$(".selector").igDialog({
					stateChanging : function(evt, ui) {...}
				});

  • changeGlobalLanguage
    継承

    .igDialog( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
				$(".selector").igDialog("changeGlobalLanguage");

  • changeGlobalRegional
    継承

    .igDialog( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

     
				$(".selector").igDialog("changeGlobalRegional");

  • changeLocale

    .igDialog( "changeLocale" );

    ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
    注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。

    コード サンプル

     
				$(".selector").igDialog("changeLocale");

  • close

    .igDialog( "close", [e:object] );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    開いている場合はダイアログを閉じます。
    注:
    1.ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。
    2.このメソッドによって、ダイアログの最小化または最大化の状態は変更されません。
    つまり、この「open」メソッドはダイアログを開き、以前の最小化または最大化の状態を保持します。

    • e
    • タイプ:object
    • オプション
    • ブラウザ イベント: 内部使用のみ。

    コード サンプル

     
				$(".selector").igDialog("close", e);

  • content

    .igDialog( "content", [newContent:string] );
    返却型:
    object
    返却型の説明:
    パラメーターが提供されなかった場合、メソッドは igDialog コンテンツを含むコンテナーを返します。ヘッダー、サイズ変更のハンドルなど以外のダイアログ ウィンドウの内部コンテナーです。

    igDialog コンテンツのコンテナーを取得するか、提供された新しいコンテンツを設定します。

    • newContent
    • タイプ:string
    • オプション
    • 文字列として提供される新しい HTML コンテンツ。パラメーターが提供された場合、メソッドはセッターとして操作します。

    コード サンプル

     
				//Get
				$(".selector").igDialog("content");

				//Set
				$(".selector").igDialog("content", "<div>New content</div>");
				`

  • destroy

    .igDialog( "destroy" );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    igDialog を破棄し、ターゲット要素を元の親に移動します。

    コード サンプル

     
				$(".selector").igDialog("destroy");

  • getTopModal

    .igDialog( "getTopModal" );
    返却型:
    object
    返却型の説明:
    igDialog への参照または null。

    一番上のモーダル ダイアログへの参照を取得します。

    コード サンプル

     
				$(".selector").igDialog("getTopModal");

  • isTopModal

    .igDialog( "isTopModal" );
    返却型:
    bool
    返却型の説明:
    true: ダイアログは上部にあります。

    ダイアログがモーダルであり、現在アクティブかどうかを確認します。

    コード サンプル

     
				$(".selector").igDialog("isTopModal");

  • mainElement

    .igDialog( "mainElement" );
    返却型:
    domelement
    返却型の説明:
    jQuery オブジェクトへの参照を返します。

    ダイアログを表す動的に作成された DIV 要素への参照を取得します。

    コード サンプル

     
				$(".selector").igDialog("mainElement");

  • maximize

    .igDialog( "maximize" );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    最大化されていない場合は、ダイアログを最大化します。
    注: ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。

    コード サンプル

     
				$(".selector").igDialog("maximize");

  • minimize

    .igDialog( "minimize" );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    最小化されていない場合は、ダイアログを最小化します。
    注: ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。

    コード サンプル

     
				$(".selector").igDialog("minimize");

  • moveToTop

    .igDialog( "moveToTop", [e:object] );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    モーダルでないダイアログを先頭に移動する

    • e
    • タイプ:object
    • オプション
    • ブラウザの元のイベント。

    コード サンプル

     
				$(".selector").igDialog("moveToTop", e);

  • open

    .igDialog( "open" );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    閉じている場合はダイアログを開きます。注:
    1.ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。
    2.このメソッドによって、ダイアログの最小化または最大化の状態は変更されません。ダイアログが最小化または最大化状態で close メソッドにより閉じた場合、ダイアログがその状態で開かれます。

    コード サンプル

     
				$(".selector").igDialog("open");

  • pin

    .igDialog( "pin" );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    固定されていない場合は、ダイアログを固定します。
    ダイアログが固定される場合、ダイアログの HTML 要素は、ターゲット要素が配置される元のコンテナーに移動され、position:absolute は削除されます。
    固定されたダイアログはモーダル状態および最大化された状態をサポートせず、またこれは移動できません。
    注:
    1.元の target-element の親要素が非表示の場合、固定ダイアログも非表示になります。
    2.ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。

    コード サンプル

     
				$(".selector").igDialog("pin");

  • restore

    .igDialog( "restore" );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    ダイアログの標準状態 (最大化または最小化) を設定します。
    注: ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。

    コード サンプル

     
				$(".selector").igDialog("restore");

  • state

    .igDialog( "state", [state:string] );
    返却型:
    string
    返却型の説明:
    状態を返します。

    エディターの状態を取得、設定します。
    注: ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。

    • state
    • タイプ:string
    • オプション
    • 新しい状態。

    コード サンプル

     
				// Get
				$(".selector").igDialog("state");

				// Set
				$(".selector").igDialog("state", "minimized");

  • unpin

    .igDialog( "unpin" );
    返却型:
    object
    返却型の説明:
    この igDialog への参照を返します。

    固定されている場合は、固定を解除します。
    注: ダイアログの状態が変更された場合、stateChanging および stateChanged イベントが発生されます。

    コード サンプル

     
				$(".selector").igDialog("unpin");

  • ui-igdialog-buttonclose

    ヘッダーに配置された閉じるボタンに適用されるクラス。

  • ui-igdialog-close-icon ui-icon ui-icon-close

    閉じるボタンのアイコンに適用されるクラス。

  • ui-igdialog-content ui-widget-content ui-dialog-content

    ダイアログのコンテンツ領域に適用されるクラス。

  • ui-igdialog-content-iframe

    ターゲット要素が IFRAME の場合、ダイアログのコンテンツ領域に適用されるクラス。

  • ui-igdialog ui-dialog ui-widget

    メイン/最上位の要素に適用されるクラス。

  • ui-igdialog-dragging

    ドラッグ中にダイアログに適用されるクラス。

  • ui-igdialog-footer ui-widget-header ui-corner-bottom ui-helper-clearfix

    フッターに適用されるクラス。

  • ui-igdialog-header ui-dialog-titlebar ui-widget-header

    ヘッダーに適用されるクラス。

  • ui-igdialog-headerbutton ui-corner-all ui-state-default

    ヘッダーに配置されたボタンに適用されるクラス。

  • ui-igdialog-headerbutton-hover ui-state-hover

    マウスがその上に移動した時に、ヘッダーに配置されたボタンに適用されるクラス。

  • ui-igdialog-header-focus ui-state-focus

    フォーカスがある状態のヘッダーに適用されるクラス。

  • ui-igdialog-headerimage

    「画像」オプションが設定されている時に、ヘッダー内の画像を表す SPAN に適用される追加クラス。

  • ui-corner-bottom

    最小化状態のヘッダーに適用されるクラス。

  • ui-igdialog-headertext ui-dialog-title

    ヘッダー テキストに適用されるクラス。

  • ui-igdialog-headertext-minimized

    ダイアログが最小化状態の時にヘッダー テキストに適用されるクラス。

  • ui-igdialog-buttonmaximize

    ヘッダーに配置された最大化ボタンに適用されるクラス。

  • ui-igdialog-maximize-icon ui-icon ui-icon-extlink

    最大化ボタンのアイコンに適用されるクラス。

  • ui-igdialog-buttonminimize

    ヘッダーに配置された最小化ボタンに適用されるクラス。

  • ui-igdialog-minimize-icon ui-icon ui-icon-minus

    最小化ボタンのアイコンに適用されるクラス。

  • ui-igdialog-overlay ui-widget-overlay

    ダイアログがモーダル状態の時にシェル要素に適用されるクラス。

  • ui-igdialog-buttonpin

    ヘッダーに配置された固定ボタンに適用されるクラス。

  • ui-igdialog-pin-icon ui-icon ui-icon-pin-s

    固定ボタンのアイコンに適用されるクラス。

  • ui-igdialog-resizing

    サイズ変更中にダイアログに適用されるクラス。

  • ui-igdialog-restore-icon ui-icon ui-icon-newwin

    復元ボタンのアイコンに適用されるクラス。

  • ui-igdialog-unmovable

    ダイアログが最大化または固定などの移動不可能な状態の時に、ヘッダーに適用されるクラス。

  • ui-igdialog-unpin-icon ui-icon ui-icon-pin-w

    固定解除ボタンのアイコンに適用されるクラス。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.