Cloner des boutons de dialogue jqueryui en haut de la boîte de dialogue

Question

J'ai une grande boîte de dialogue avec les boutons Enregistrer et Annuler qui effectuent certaines actions sur les données dans la boîte de dialogue ainsi que la fermeture de la boîte de dialogue.

Est-il possible de dupliquer ces boutons afin qu'ils s'affichent en haut de la boîte de dialogue et en bas?

J'ai été capable de le faire manuellement avec des résultats sporadiques. Puis-je cloner les boutons exacts créés dans le dialogue init? Je sais que les boutons n'ont pas d'ID si ...

Merci!

Answer 1

Oui, vous pouvez le faire. Le sélecteur exact utilisé dans le script jQuery dépendra de l'élément HTML utilisé pour afficher vos boutons, mais pour cloner les boutons et leurs gestionnaires d'événements seront quelque chose comme:

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

Pour les ajouter à un certain conteneur qui se trouve en haut de la boîte de dialogue:

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

Vérifiez les docs pour clone.

Answer 2

Le widget de boîte de dialogue n'offre pas ce comportement prêt à l'emploi. Vous pouvez vous-même pirater le comportement, mais il risque de se casser lorsque vous effectuez une mise à niveau vers les nouvelles versions de jquery-ui. Voici comment j'accomplir:

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

aussi simple que cela

ajouter ce qui suit à la ligne 445 autour css dans jquery ui css

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