Clonar los botones de diálogo jqueryui en la parte superior del cuadro de diálogo

Question

Tengo un cuadro de diálogo alto con los botones Guardar y Cancelar que realizan algunas acciones sobre los datos en el cuadro de diálogo y cierran el cuadro de diálogo.

¿Es posible duplicar estos botones para que se muestren en la parte superior del cuadro de diálogo, así como en la parte inferior?

He podido hacer esto manualmente con resultados esporádicos. ¿Puedo clonar los botones exactos que se crean en el diálogo init? Sé que los botones no tienen identificación aunque ...

¡Gracias!

Answer 1

Sí, puedes hacer esto. El selector exacto utilizado en la secuencia de comandos de jQuery dependerá del elemento HTML que se utiliza para mostrar los botones, pero para clonar los botones y sus controladores de eventos serán algo así como:

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

para agregarlos a algún recipiente que se encuentra en la parte superior del cuadro de diálogo:

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

Mira la documentación para clone.

Answer 2

El widget de diálogo no proporciona este comportamiento desde el primer momento. Puede hackear el comportamiento usted mismo, pero podría romperse a medida que actualiza a las versiones más recientes de jquery-ui. Así es como me gustaría lograrlo:

$('#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

tan simple como esto

añadir lo siguiente a la css alrededor de la línea 445 en jQuery UI CSS

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