在对话框顶部克隆jqueryui对话框按钮
问题描述:
我有一个高对话框,带有Save和Cancel按钮,它们对对话框中的数据执行一些操作,并关闭对话框。在对话框顶部克隆jqueryui对话框按钮
是否可以复制这些按钮,以便它们显示在对话框顶部以及底部?
我已经能够通过虚拟结果手动执行此操作。我可以克隆在对话框init中创建的确切按钮吗?我知道按钮没有ID的,但...
谢谢!
答
是的,你可以做到这一点。在jQuery脚本中使用的精确选择将取决于用来显示您的按钮的HTML元素,但克隆的按钮和他们的事件处理程序是这样的:
$('.dialogClass button').clone(true);
要将它们添加到一些容器位于在对话框的顶部:
$('.dialogClass button').clone(true).appendTo('.topContainerClass');
检出文档clone。
答
对话框小部件不提供这种开箱即用的行为。你可以自己破解行为,但当你升级到更新的jquery-ui版本时,它可能会破坏。以下是我会完成它:
$('#my-dialog').dialog({
buttons: {
'hello world': function() { alert('hello world'); },
'good bye': function() { alert('goodbye'); }
},
open: function(event, ui) {
// for whatever reason, the dialog isn't passed into us as a paramter, discover it.
var dialog = $(this).closest('.ui-dialog');
// create a copy of all the buttons and mark it as a clone (for later)
var originalButtons = $('.ui-dialog-buttonpane', dialog)
var clonedButtons = originalButtons.clone().addClass('clone');
$('.ui-dialog-titlebar', dialog).after(clonedButtons);
// cloning doesn't copy over event handlers, so we need to wire up
// the click events manually.
$('button', clonedButtons).click(function() {
var button = $(this);
var buttonIndex = $('button', clonedButtons).index(button);
$('button:eq(' + buttonIndex + ')', originalButtons).click();
});
}
});
答
像这样简单
以下的jQuery UI的CSS
.ui-dialog .ui-dialog-buttonpane
{
position: absolute; top: 35px; width: 98%;
}
感谢Marve添加到CSS围绕线445。我确实有多个对话框,所以我尝试的所有选择器都创建了这些按钮的几个克隆。对不起,我应该提到我在这个应用程序中有多个对话框。 – mattmac 2009-09-30 20:34:06