Teehaus Otterndorf

Mit dem JQuery UI Plugin lassen sich u.a. beeindruckende Dialogboxen erzeugen und dynamisch gestalten. So lässt sich z.B. der Titel der Dialogbox individuell gestalten, genauso wie der Text, der innerhalb der Box oder die einzelnen Buttons der Box. Ebenfalls können beliebig viele Buttons für die Dialog-Box erstellt werden und mit unterschiedlichen Bezeichnungen und Funktionen versehen werden.

Allerdings sind mit dem Dialog Modul des UI-Plugins keine Confirm-Dialoge im klassischen Sinne möglich. Es kann zwar ein Dialog erstellt werden, der wie eine Confirm()-Meldung die über das standardmäßige Javascript aufgerufen werden kann. Um solch ein Verhalten zu erzeugen, ist ein wenig Trickserei notwendig.

Dazu muss die Dialogbox aus einem Formular bestehen. Für die Dialogbox werden zwei Buttons angelegt, im Sinne von “OK” und “Abbrechen”. Der Button “Abbrechen” wird lediglich mit der Funktion belegt, die Dialogbox zu schließen. Der Button “OK” bekommt die Funktion zugewiesen, das in der Dialog-Box befindliche Formular abzuschicken. Soweit die Kurzbeschreibung, nun folgt die etwas ausführliche Beschreibung.

Zu erst schauen wir uns die Dialogbox mit deren Inhalt an:

Das besondere an der Dialog-Box ist, dass es ein verstecktes Formular enthält mit dem alle notwendigen Parameter übertragen werden, für den Fall, dass der “OK”-Button geklickt wurde. Nun zum JQuery-Snippet, dass die Dialog-Box initialisiert.

  $(document).ready(function() {
    $("#dialog").dialog({
    	bgiframe: true,
    	autoOpen: false,
    	height: 300,
    	modal: true,
    	buttons: {
    		OK: function() {
    	              $("#dialog > form").submit();
    		  $(this).dialog('close');
    		},
    		Abbrechen: function() {
    			$(this).dialog('close');
    		}
    	}
    });
    $('#benutzerDel').click(function() {
    	$('#dialog').dialog('open');
    });
  });

Die Zeilen 3-6 übergeben dem Plugin einige Parameter, wie die Dialog-Box dargestellt werden soll. In den Zeilen 7-15 wird es schon interessanter, hier werden die Buttons für die Dialog-Box und die dazugehörigen Funktionen eingerichtet. In diesem Beispiel werden zwei Button erstellt, einmal der Button “OK” und der Button “Abbrechen”. Der erste Button bekommt in Zeile 9 die Funktion zugewiesen, dass bei Klicken des “OK”-Buttons das im Dialog liegende Formular abgeschickt wird.

Das gleiche passiert in der Zeile 13, dort wird dem “Abbrechen”-Button die Funktion zum Schließen der Dialog-Box zugewiesen. Sollte also der “Abbrechen”-Button geklickt werden, passiert nichts weiter, außer dass die Dialog-Box geschlossen wird. In den Zeilen 16 – 18 wird der eigentliche Aufruf des Dialogs initialisiert. Sobald das Element mit der ID “#dialog” geklickt wurde öffnet sich die Dialog-Box, die in den vorherigen Zeilen initialisiert wurde.

Zum Abschluss fehlt noch das Element zum Aufrufen des Dialogs:

Hier gehts zur Demo.

weiterführende Links:
JQuery UI Homepage
JQuery UI Demo