I'm sharing some Messager extensions I made, use it as you see fit, it's more of an example. The docs mention that you can provide a options object, but there's no detail on what that object should look like. This shows some things you can do.
We mostly use Yes/No instead of OK/Cancel, so I added a yesno() for easy use, and also a yesnocancel() which shows how to do additional buttons and custom callback values.
password() shows how to customize the prompt
prompt2() adds an option to supply a default value, would be great if this were just built in
login() shows a more complex multi-input dialog as a simple messager, with a callback object instead of just a simple value.
the bindHotkeys() wrapper adds support for a hotkey, so on the yesno the user can just press y or n to answer the prompt. it can be added no matter what buttons you provide, it'll hotkey the first unique character of each button, or you can add your own <u> tag to specify it yourself in the button label. a built in way to do this would be great too. I know escape closes the dialog but does nor call your callback which does not help in handling "user canceled the event" process, and enter will click the focused button, which is great. hotkeys add better support for custom buttons.
(function($){
function bindHotkeys(msgr) {
var win = $("body").children("div.messager-window");
if (!win.length) {
return msgr;
}
var buttonwrapper = win.find(".messager-button");
var buttons = {};
buttonwrapper.find(".l-btn-text").each(function() {
var c = this.innerHTML.match(/<u>(.)<\/u>/);//do we already have a single char underline
if(c) {
buttons[c[1].toUpperCase()] = this; //keep it
} else {
var i = 0; //find first unique char
c = this.innerHTML.substr(i,1).toUpperCase();
while(buttons[c]) {
i++;
c = this.innerHTML.substr(i,1).toUpperCase();
}
buttons[c] = this;
this.innerHTML = this.innerHTML.substr(0,i) + "<u>" + this.innerHTML.substr(i,1) + "</u>" + this.innerHTML.substring(i+1); //add the underline
}
});
buttonwrapper.on("keypress", function(event) {
for(var btn in buttons){
if (String.fromCharCode(event.which).toUpperCase() == btn) {
$(buttons[btn]).click();
event.preventDefault();
}
}
});
return msgr;
}
function closeDialog(dlg, retval) {
var opts = dlg.dialog("options");
dlg.dialog("close");
opts.fn(retval);
};
$.extend($.messager, {
//$.messager supports a config object that allows overriding the content
prompt2: function(title, msg, value, fn) {
var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>" + "<div><input class=\"messager-input\" type=\"text\" value=\"" + value + "\"/></div>";
return bindHotkeys($.messager.prompt({
title: title, msg: msg, fn: fn,
content: content
}));
},
password:function(title,msg,fn){
var content="<div class=\"messager-icon messager-question\"></div>"+"<div>"+msg+"</div>"+"<br/>"+"<div style=\"clear:both;\"/>"+"<div><input class=\"messager-input\" type=\"password\"/></div>";
return bindHotkeys($.messager.prompt({
title: title, msg: msg, fn: fn,
content: content
}));
},
login:function(title,msg,fn){
var content="<div class=\"messager-icon messager-question\"></div>"+"<div>"+msg+"</div>"+"<br/>"+"<div style=\"clear:both;\"/>"
+"<div class=\"righttext\">Login ID: <input class=\"messager-input messager-id\" type=\"text\" style=\"width:auto;\"/></div>"
+"<div class=\"righttext\">Password: <input class=\"messager-input messager-pass\" type=\"password\" style=\"width:auto;\"/></div>";
var dlg = $.messager.prompt({
title: title, msg: msg, fn: fn,
content: content,
buttons: [{
text: $.messager.defaults.ok, onClick: function () {
closeDialog(dlg, {id:dlg.find(".messager-id").val(), pass:dlg.find(".messager-pass").val()});
}
}, {
text: $.messager.defaults.cancel, onClick: function () {
closeDialog(dlg, false);
}
}]
});
dlg.find(".messager-input:first").focus();
return bindHotkeys(dlg);
},
yesnocancel: function(title, msg, fn) { //$.messager supports a button array in the options, so this is for backwards compat
var dlg = $.messager.confirm({
title: title, msg: msg, fn: fn,
buttons: [{
text: $.messager.defaults.yes, onClick: function () {
closeDialog(dlg, "y");
}
}, {
text: $.messager.defaults.no, onClick: function () {
closeDialog(dlg, "n");
}
}, {
text: $.messager.defaults.cancel, onClick: function () {
closeDialog(dlg, "c");
}
}]
});
return bindHotkeys(dlg);
},
yesno: function(title, msg, fn, buttontitles) { //$.messager supports a button names in the options, so this is for backwards compat
return bindHotkeys($.messager.confirm({
title: title, msg: msg, fn: fn,
ok: (buttontitles?buttontitles.yes:$.messager.defaults.yes),
cancel: (buttontitles?buttontitles.no:$.messager.defaults.no),
}));
},
});
$.extend($.messager.defaults, {
yes: "Yes",
no: "No"
});
})(jQuery);
