Class jQuery.imui.imuiMessageDialog

Constructor

imuiMessageDialog ( [Object options] ) Static
アイコン付きのダイアログを作成します。
注意事項
  • Internet Explorerでは、ダイアログに配置するコンポーネントの組み合わせによっては、ダイアログの高さが意図せず増加する場合があります
  • closeOnEscape="true" かつ modal="true" を指定したダイアログの中でさらに closeOnEscape="true" かつ modal="true" を指定したダイアログを開いた後、オーバーレイ(黒い部分)をクリックし、エスケープキーを押すと2つ目のダイアログではなく1つ目のダイアログが閉じます。これを回避するには closeOnEscape="false" を指定してください。
Parameters
options : Object
OptionalDefault: {}
オプション
options.iconType : String
OptionalDefault: ''
表示するアイコンクラスを指定します
未指定の場合は画像なしのダイアログが表示されます
アイコンクラス名以外にも下記の値を指定することでアイコンが表示されます
指定する値表示されるアイコンクラス名
errorim-ui-icon-common-32-error
warningim-ui-icon-common-32-warning
confirmim-ui-icon-common-32-confirmation
questionim-ui-icon-common-32-question
infoim-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')"
                      }
                  ]
});

Static members

Static MethodsDefined By

ダイアログを閉じます。
//#target は、imuiMessageDialog のセレクタを指定してください。
$("#target").imuiMessageDialog("close");
ダイアログが開いているかどうかを確認します。
//#target は、imuiMessageDialog のセレクタを指定してください。
var dialogIsOpen = $("#target").imuiMessageDialog("isOpen");

Events

EventDefined By

beforeClose ( EventObject e, Object ui ) jQuery.imui.imuiMessageDialog
ダイアログが閉じられようとしたときに発生します。
Parameters
e : EventObject
イベント
ui : Object
空のオブジェクト
//パラメータとして指定するとき
$('#id').imuiMessageDialog({
    beforeClose: function(event, ui) {
    }
});
//イベントをバインドするとき
//#target は、imuiMessageDialog のセレクタを指定してください。
$('#target').on('imuimessagedialogbeforeclose', function(event, ui) {
    }
);
close ( EventObject e, Object ui ) jQuery.imui.imuiMessageDialog
ダイアログが閉じられたときに発生します。
Parameters
e : EventObject
イベント
ui : Object
空のオブジェクト
//パラメータとして指定するとき
$('#id').imuiMessageDialog({
    close: function(event, ui) {
    }
});
//イベントをバインドするとき
//#target は、imuiMessageDialog のセレクタを指定してください。
$('#target').on('imuimessagedialogclose', function(event, ui) {
    }
);
open ( EventObject e, Object ui ) jQuery.imui.imuiMessageDialog
ダイアログが開かれたときに発生します。
Parameters
e : EventObject
イベント
ui : Object
空のオブジェクト
//パラメータとして指定するとき
$('#id').imuiMessageDialog({
    open: function(event, ui) {
    }
});
//イベントをバインドするとき
//#target は、imuiMessageDialog のセレクタを指定してください。
$('#target').on('imuimessagedialogopen', function(event, ui) {
    }
);