Ändern von Schaltflächen im Lightbox

Es ist möglich, die Standard-Schaltflächen im Lightbox anzupassen. Beispielsweise möchten Sie möglicherweise die 'Edit'-Schaltfläche für Benutzer ausblenden, die nur Aufgaben ansehen können, oder eine neue "Drucken"-Schaltfläche hinzufügen, um Benutzern das Drucken von Aufgabenbeschreibungen zu ermöglichen.

Standardmäßig enthält das Lightbox drei Schaltflächen ('Speichern', 'Abbrechen', 'Löschen'). Diese Schaltflächen werden über die Konfigurationsoptionen buttons_left und buttons_right eingerichtet.

gantt.config.buttons_left = ["gantt_save_btn", "gantt_cancel_btn"];
gantt.config.buttons_right = ["gantt_delete_btn"];

Um die Standard-Schaltflächen zu ändern, gehen Sie wie folgt vor:

Aktualisieren Sie das buttons_left- oder buttons_right-Array mit den gewünschten Schaltflächen.

Beachten Sie, dass die Material Skin die Schaltflächenkonfiguration überschreibt. Um dies zu vermeiden, fügen Sie die Schaltflächenkonfiguration innerhalb des onGanttReady-Ereignishandlers ein:

gantt.attachEvent("onGanttReady", function(){
   gantt.config.buttons_left = ["gantt_save_btn","gantt_cancel_btn","complete_button"];   
   gantt.config.buttons_right = ["gantt_delete_btn"];               
});

Definieren Sie das Label für die neue Schaltfläche:

gantt.locale.labels["complete_button"] = "Fertigstellen";

Um das Erscheinungsbild der Schaltfläche anzupassen, wie z.B. das Hinzufügen eines Symbols oder anderer Stile, definieren Sie eine CSS-Klasse:

.complete_button{
    margin-top: 1px;
    background-image:url("common/v_complete.png");
    width: 20px;
}

Fügen Sie einen Ereignishandler hinzu, um Klicks auf die Schaltfläche zu verwalten:

gantt.attachEvent("onLightboxButton", function(button_id, node, e){
    if(button_id == "complete_button"){
        var id = gantt.getState().lightbox;
        gantt.getTask(id).progress = 1;
        gantt.updateTask(id);
        gantt.hideLightbox();
    }
});

Ändern von Schaltflächenbeschriftungen

Falls erforderlich, können Schaltflächenbeschriftungen vor der Initialisierung von Gantt mit dieser Syntax aktualisiert werden:

gantt.locale.labels.icon_save = "Neue Beschriftung";
gantt.locale.labels.icon_cancel = "Neue Beschriftung";
gantt.locale.labels.icon_delete= "Neue Beschriftung";
 
gantt.init("gantt_here");

Alternativ können Sie die Beschriftungen nach der Initialisierung von Gantt mit diesem Ansatz ändern:

gantt.attachEvent("onGanttReady", function(){
  gantt.locale.labels.gantt_save_btn = "Neue Beschriftung";
  gantt.locale.labels.gantt_cancel_btn = "Neue Beschriftung";
  gantt.locale.labels.gantt_delete_btn = "Neue Beschriftung";
});

Ab Version 7.0 können Beschriftungen auch mit dem i18n-Objekt aktualisiert werden:

gantt.i18n.setLocale({
   labels: {
      gantt_save_btn: "Neue Beschriftung",
      gantt_cancel_btn: "Neue Beschriftung",
      gantt_delete_btn: "Neue Beschriftung"
   }
});

Zurück nach oben