Is it possible to simulate button clicks or specify default OK & Cancel action handlers in jQuery UI Dialog?
I'm face to face with this issue, and I don't know how I can resolve it. I found some similar 开发者_高级运维solutions here but none of them is what I need. Let's say, I have some code that makes a simple wrapper around one-button jQuery UI dialogs. In this case all is simple:
$parent.keypress(function(e) {
switch ( e.keyCode ) {
case 13:
case 27:
$parent.unbind("keypress");
$plugin.dialog("destroy");
break;
}
});
because I have the only button here. But what if a I have two or even more buttons? I thought there was something like $parent.dialog(...)
or something like $parent.trigger("__keypress__", "__button__name__")
- I didn't find any similar in the jQuery UI Dialog API. Is there any workaround?
Thanks to everyone for the suggestions.
Update:
P.S. I have found a rough solution: var $parent = $dialog.parent();
$parent.keypress(function(e) {
switch ( e.keyCode ) {
case 13:
$parent.find(".ui-dialog-buttonpane button:contains('OK')").click();
break;
case 27:
$parent.find(".ui-dialog-buttonpane button:contains('Cancel')").click();
break;
default:
return;
}
$parent.unbind("keypress");
$plugin.dialog("destroy");
});
But could it be simplier? My current solution requires a lot of code change.
$(function() { $("#dialog").dialog("destroy");
$("#dialog-confirm").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
'Delete all items': function() {
//Delete some stuff
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
I had no a lot of time, and I've implement some work around. Don't know whether it's good, but it seems to be useful but rough.
$.fn.bindShortcuts = function(shortcuts) {
var $this = $(this);
var $parent = $this.parent();
var isByMouse = false;
$parent.bind("keypress.shortcuts", function(e) {
var caption = shortcuts[e.keyCode];
if ( caption ) {
var button = $parent.find(".ui-dialog-buttonpane button:contains('" + caption + "')");
if ( button.length && !isByMouse ) {
button.click();
$parent.unbind("keypress.shortcuts");
}
}
});
$parent.find(".ui-dialog-buttonpane button").click(function() {
isByMouse = true;
$parent.unbind("keypress.shortcuts");
});
return $this;
};
$.fn.bindOkCancel = function(ok, cancel) {
return $(this).bindShortcuts({
13: ok,
27: cancel
});
}
And how it could be used:
dialog = $dialog.dialog({
buttons: {
"Cancel": $.noop,
"Export": $.noop
}
}).bindOkCancel("Export", "Cancel");
:)
精彩评论