Clone jqueryui Dialogschaltflächen am oberen Rand des Dialogfelds

Question

Ich habe ein großes Dialogfeld mit Speichern und Abbrechen-Schaltflächen, die einige Aktionen für die Daten in dem Dialogfeld sowie das Schließen des Dialogfelds ausführen.

Ist es möglich, diese Schaltflächen zu duplizieren, so dass sie oben im Dialogfeld sowie unten angezeigt werden?

Ich konnte dies manuell mit sporaktischen Ergebnissen tun. Kann ich die genauen Schaltflächen, die im Dialog init erstellt werden, klonen? Ich weiß, dass die Tasten keine IDs haben, aber ...

Danke!

Answer 1

Ja, Sie können dies tun. Die genaue Selektor in dem jQuery-Skript verwendet wird auf dem HTML-Elemente ab, das verwendet Ihre Schaltflächen angezeigt werden, aber die Tasten und ihre Event-Handler zu klonen werden so etwas wie:

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

Um sie zu einem gewissen Container hinzufügen, befindet sich am oberen Rand des Dialog:

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

Schauen Sie sich die Dokumentation für clone.

Answer 2

Das Dialogfeldwidget bietet dieses Verhalten nicht standardmäßig an. Sie können das Verhalten selbst hacken, aber es könnte brechen, wenn Sie auf neuere jquery-ui-Versionen aktualisieren. Hier ist, wie ich es erreichen würde:

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

so einfach wie dieses

fügen Sie den folgenden auf die CSS um die Linie 445 in jquery ui css

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