17.03.2011 -

jQuery UI-Dialog dynamisch Buttons hinzufügen

Ist ein Dialog initialisiert, so kann man mit den gegebenen Methoden keine Buttons mehr hinzufügen oder entfernen. Mit den drei Erweiterungen "addbutton", "removebutton" und "renamebutton" lässt sich dieses Problem lösen.

Eigenen Button hinzufügen

$.extend($.ui.dialog.prototype, {
    'addbutton': function(buttonName, func) {
            var buttons = this.element.dialog('option', 'buttons');
            buttons[buttonName] = func;
            this.element.dialog('option', 'buttons', buttons);
    }
});

Button löschen

$.extend($.ui.dialog.prototype, {
    'removebutton': function(buttonName) {
            var buttons = this.element.dialog('option', 'buttons');
            delete buttons[buttonName];
            this.element.dialog('option', 'buttons', buttons);
    }
});

Button umbenennen

$.extend($.ui.dialog.prototype, {
    'renamebutton': function(buttonName, newName) {
            var buttons = this.element.dialog('option', 'buttons');
            var buttonFunction = buttons[buttonName];
            buttons[newName] = buttonFunction;
            delete buttons[buttonName];
           
            this.element.dialog('option', 'buttons', buttons);
    }
});

Verwenden am Beispiel von addbutton

$('#meinDlg').dialog('addbutton', 'Meldung anzeigen', function(){
    alert("Meldung");
));

© EGARA-CMS ist ein urheberrechtlich geschütztes Produkt der DREIWERKEN GmbH - Ihrer Werbeagentur für Online- und Print-Medien aus Kolbermoor (bei Rosenheim).