アイコン付きのダイアログを作成します。
- Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります
- closeOnEscape="true" かつ modal="true" を指定したダイアログの中でさらに closeOnEscape="true" かつ modal="true" を指定したダイアログを開いた後、オーバーレイ(黒い部分)をクリックし、エスケープキーを押すと2つ目のダイアログではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape="false" を指定してください。
Parameters
- options : Object
- OptionalDefault: {}
- オプション
- options.iconType : String
- OptionalDefault: ''
- 表示するアイコンクラスを指定します
未指定の場合は画像なしのダイアログが表示されますアイコンクラス名以外にも下記の値を指定することでアイコンが表示されます
指定する値 | 表示されるアイコンクラス名 |
error | im-ui-icon-common-32-error |
warning | im-ui-icon-common-32-warning |
confirm | im-ui-icon-common-32-confirmation |
question | im-ui-icon-common-32-question |
info | im-ui-icon-common-32-information |
- options.verticalAlign : String
- OptionalDefault: 'middle'
- アイコンのvertical-align を操作します
top(上揃え),middle(中央揃え),bottom(下揃え) のいずれかを指定します
- options.closeOnEscape : Boolean
- OptionalDefault: true
- エスケープキーでダイアログを閉じるかどうかを指定します
- options.draggable : Boolean
- OptionalDefault: true
- ダイアログがドラッグ移動できるかどうかを指定します
- options.height : Number
- OptionalDefault: auto
- ダイアログの縦幅を指定します
- options.modal : Boolean
- OptionalDefault: false
- ダイアログ表示時に背面の操作制限を指定します
- options.position : Array
- OptionalDefault: []
- ダイアログの表示位置を指定します
- options.resizable : Boolean
- OptionalDefault: true
- ダイアログがリサイズできるかどうかを指定します
- options.stack : Boolean
- OptionalDefault: true
- ダイアログが、他のダイアログの上に積み重ねできるかどうかを指定します
- options.title : String
- OptionalDefault: ''
- ダイアログのタイトルを指定します
- options.width : Number
- OptionalDefault: 300
- ダイアログの横幅を指定します
- options.toolbarLeft : Array
- OptionalDefault: []
- ダイアログのタイトル直下に表示するツールバーへ、左寄せで表示する内容を指定します
- options.toolbarRight : Array
- OptionalDefault: []
- ダイアログのタイトル直下に表示するツールバーへ、右寄せで表示する内容を指定します
- options.buttons : Object/Array
- OptionalDefault: undefined
- ダイアログ下部に表示するボタンを指定します
- options.useHelp : Boolean
- OptionalDefault: false
- サイトツアーを呼び出すアイコンを表示するかどうかを指定します(true: 表示する、false: 表示しない)
8.0.10 から指定できるようになりました
//エラーアイコン付きのメッセージダイアログを表示する
$("<div>message</div>").imuiMessageDialog({
iconType: 'error'
});
//タイトルを指定する例
$("<div>message</div>").imuiMessageDialog({
iconType: 'warning',
title: '警告メッセージ'
});
//アイコンとメッセージの縦位置の上揃えで表示する例
$("<div>message1<br/>message2<br/>message3<br/>message4<br/>message5<br/></div>").imuiMessageDialog({
iconType: 'info',
verticalAlign: 'top'
});
//アイコンとメッセージ領域の下にメッセージを表示する例
$("<div>message</div>").imuiMessageDialog({
iconType: 'confirm'
}).append('message2');
//position を指定する例
$("<div></div>").imuiMessageDialog({
position: [100, 100]
});
//ボタンを表示する例
$("<div></div>").imuiMessageDialog({
buttons: [
{
'id': 'okbutton',
'text': 'OK',
'click': function() { alert('OK'); }
},
{
'text': 'キャンセル',
'click': function() {$(this).imuiMessageDialog('close'); }
}
]
});
//toolbarLeft, toolbarRight を指定する例
$("<div></div>").imuiMessageDialog({
toolbarLeft: [
{
title: "戻る",
text: "戻る",
iconClass: "im-ui-icon-common-16-back",
href: "javascript:alert('back');"
},
{
title: "カレンダー",
text: "カレンダー",
iconClass: "im-ui-icon-common-16-calendar",
href: "javascript:alert('calendar')"
}
],
toolbarRight: [
{
title: "最新",
iconClass: "im-ui-icon-common-16-refresh",
href: "javascript:alert('refresh')"
}
]
});