ui.igDialog

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> |
関連サンプル
関連トピック
依存関係
-
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
- デフォルト:
- defaults
ウィジェットの領域設定を取得または設定します。
コード サンプル
//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"
,
"temporaryUrl"
);
//Set
$(
".selector"
).igDialog(
"option"
,
"temporaryUrl"
,
"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 でイベントを使用するを参照してください。
-
animationEnded
- キャンセル可能:
- false
ダイアログが閉じていた、または開いていた時の、最後のアニメーションの後に発生するイベント。
-
evtタイプ: Event
jQuery イベント オブジェクト。
-
uiタイプ: Object
-
ownerタイプ: Object
igDialog ウィジェットへの参照を取得します。
-
buttonタイプ: String
イベントをトリガーされたボタンの名前を取得します。注: 状態がコードから修正された場合、「button」が undefined です。
-
oldStateタイプ: String
ダイアログの古い状態を取得します。これは次のいずれかになり得ます: 「opened」、「minimized」、「maximized」、「closed」。
-
oldPinnedタイプ: Bool
ダイアログの古い固定状態のブール値を取得します。
-
actionタイプ: String
アニメーションを起動させたアクション名を取得します。
-
コード サンプル
//Bind after initialization
$(document).on(
"igdialoganimationended"
,
".selector"
,
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
ダイアログまたはそのコンテンツがフォーカスを失ったとき発生するイベント。
コード サンプル
//Bind after initialization
$(document).on(
"igdialogblur"
,
".selector"
,
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
ダイアログまたはそのコンテンツがフォーカスを得たとき発生するイベント。
コード サンプル
//Bind after initialization
$(document).on(
"igdialogfocus"
,
".selector"
,
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タイプ: Event
jQuery イベント オブジェクト。状態がコードから修正された場合、このパラメーターは null になります。
-
uiタイプ: Object
-
ownerタイプ: Object
igDialog ウィジェットへの参照を取得します。
-
buttonタイプ: String
イベントがトリガーされたボタンの名前を取得します。注: 状態がコードから修正された場合、「button」が undefined です。
-
oldStateタイプ: String
ダイアログの古い状態を取得します。これは次のいずれかになり得ます: 「opened」、「minimized」、「maximized」、「closed」。
-
oldPinnedタイプ: Bool
ダイアログの古い固定状態のブール値を取得します。
-
actionタイプ: String
アクションの名前を取得します。以下のいずれかになります。 "open" - ダイアログが開きました。注: 予期される「openAnimation」の開始前にイベントが発生します。「close」- ダイアログが閉じました。注: 予期される「closeAnimation」の開始前にイベントが発生します。「minimize」- ダイアログが最小化されました。「maximize」- ダイアログが最大化されました。「restore」 - 最小化または最大化の状態からダイアログが復元されました。「pin」- ダイアログが固定されました。「unpin」- ダイアログの固定が解除されました。
-
コード サンプル
//Bind after initialization
$(document).on(
"igdialogstatechanged"
,
".selector"
,
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"
// - "restore"
// - "pin"
// - "unpin"
ui.action
});
//Initialize
$(
".selector"
).igDialog({
stateChanged :
function
(evt, ui) {...}
});
-
stateChanging
- キャンセル可能:
- true
ダイアログの状態が変更される前に発生するイベント。
アクションをキャンセルするには、false を返します。-
evtタイプ: Event
jQuery イベント オブジェクト。状態がコードから修正された場合、このパラメーターは null になり得ます。
-
uiタイプ: Object
-
ownerタイプ: Object
igDialog ウィジェットへの参照を取得します。
-
buttonタイプ: String
イベントがトリガーされたボタンの名前を取得します。注: 状態がコードから修正された場合、「button」が undefined です。
-
oldStateタイプ: String
ダイアログの古い状態を取得します。これは次のいずれかになり得ます: 「opened」、「minimized」、「maximized」、「closed」。
-
oldPinnedタイプ: Bool
ダイアログの古い固定状態のブール値を取得します。
-
actionタイプ: String
アクションの名前を取得します。これは以下のいずれかになります。 "open" - ダイアログを開くリクエスト。「close」 - ダイアログを閉じるリクエスト。「minimize」 - ダイアログを最小化するリクエスト。「maximize」 - ダイアログを最大化するリクエスト。「restore」 - 最小化または最大化の状態からダイアログを復元するリクエスト。「pin」 - ダイアログを固定するリクエスト。「unpin」 - ダイアログの固定を解除するリクエスト。
-
コード サンプル
//Bind after initialization
$(document).on(
"igdialogstatechanging"
,
".selector"
,
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"
// - "restore"
// - "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
- 固定解除ボタンのアイコンに適用されるクラス。