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

Question

我有一个高对话框，带有Save和Cancel按钮，它们对对话框中的数据执行一些操作，并关闭对话框。

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

我已经能够通过虚拟结果手动执行此操作。我可以克隆在对话框init中创建的确切按钮吗？我知道按钮没有ID的，但...

谢谢！

Answer 1

是的，你可以做到这一点。在jQuery脚本中使用的精确选择将取决于用来显示您的按钮的HTML元素，但克隆的按钮和他们的事件处理程序是这样的：

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

要将它们添加到一些容器位于在对话框的顶部：

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

检出文档clone。

Answer 2

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

Answer 3

像这样简单

以下的jQuery UI的CSS

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