Question

我有一个带有“保存”和“取消”按钮的高对话框，可以对对话框中的数据执行某些操作以及关闭对话框。

是否可以复制这些按钮，使它们显示在对话框的顶部和底部？

我已经能够以不正常的结果手动执行此操作。我可以克隆在对话框init中创建的确切按钮吗？我知道按钮没有id但是......

谢谢！

Answer 1

就像这个一样简单

将以下内容添加到jquery ui css

中第445行的css中

.ui-dialog .ui-dialog-buttonpane
{
position: absolute; top: 35px; width: 98%;
}

Answer 2

是的，你可以这样做。 jQuery脚本中使用的确切选择器将取决于用于显示按钮的HTML元素，但是克隆按钮和它们的事件处理程序将类似于：

$('.dialogClass button').clone(true);

将它们添加到位于对话框顶部的某个容器中：

$('.dialogClass button').clone(true).appendTo('.topContainerClass');

查看clone的文档。

Answer 3

对话框小部件不提供开箱即用的此行为。你可以自己破解这种行为，但是当你升级到更新的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();
            });
        }
    });

在对话框顶部克隆jqueryui对话框按钮

3 个答案: