Klonowanie przycisków dialogowych jqueryui na górze okna dialogowego

Question

Mam wysokie okno dialogowe z przyciskami Zapisz i Anuluj, które wykonują pewne czynności na danych w oknie dialogowym, a także zamykają okno dialogowe.

Czy można powielić te przyciski, aby były wyświetlane w górnej części okna, a także na dole?

Byłem w stanie zrobić to ręcznie z sporadycznymi wynikami. Czy mogę sklonować dokładne przyciski utworzone w oknie dialogowym init? Wiem, że przyciski nie mają identyfikatora ...

Dzięki!

Answer 1

Tak, możesz to zrobić. Dokładna selektor używane w skrypcie jQuery zależy od elementu HTML używany do wyświetlania przycisków, ale do klonowania przyciski i ich obsługi zdarzeń będzie coś takiego:

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

Aby dodać je do jakiegoś pojemnika, który znajduje się w górnej części okna:

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

Sprawdź docs dla clone.

Answer 2

Widget dialogowy nie zapewnia tego zachowania natychmiastowego. Możesz samodzielnie zhakować to zachowanie, ale może się ono zepsuć podczas uaktualniania do nowszych wydań jquery-ui. Oto w jaki sposób to osiągnąć go:

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

tak proste, jak to

dodać następujące css wokół linii 445 w jQuery UI css

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