Schaltflächen im Lightbox ändern

Es besteht die Möglichkeit, die Standard-Buttons im Lightbox zu ändern. Zum Beispiel können Sie den 'Bearbeiten'-Button für eine Gruppe von Benutzern ausblenden, die nur Aufgaben ansehen können, oder einen neuen Button "Drucken" hinzufügen, der es den Benutzern ermöglicht, die Aufgabenbeschreibung zu drucken.

Benutzerdefinierte Schaltfläche im Lightbox

Standardmäßig enthält der Lightbox 3 Buttons ('Save', 'Cancel', 'Delete'), die durch die buttons_left und buttons_right Konfigurationsoptionen festgelegt werden.

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

Um die Standard-Buttons festzulegen, befolgen Sie die folgenden Schritte:

• Geben Sie neue Elemente des buttons_left- oder buttons_right-Arrays an.

Hinweis

Beachten Sie, dass bei Verwendung des Material skin die Button-Konfiguration neu definiert wird. Um dies zu verhindern, müssen Sie die Button-Konfiguration innerhalb des onGanttReady Event-Handlers festlegen:

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

• Die Beschriftung des Buttons festlegen:

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

• Um das Symbol für den Button festzulegen (und/oder weitere Stilgebungen anzuwenden), geben Sie die CSS-Klasse wie folgt an:

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

• Geben Sie den onLightboxButton Handler an, der Klicks auf den Button behandelt:

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();
    }
});

Benutzerdefinierte Schaltfläche im Lightbox

Schaltflächen-Bezeichnungen ändern

Sie können die Bezeichnungen der Buttons vor der Initialisierung von Gantt mit dem folgenden Syntax neu festlegen:

gantt.locale.labels.icon_save = "New Label";
gantt.locale.labels.icon_cancel = "New Label";
gantt.locale.labels.icon_delete= "New Label";

gantt.init("gantt_here");

Sie können die Bezeichnungen auch nach der Initialisierung von Gantt mit einer anderen Syntax wie folgt ändern:

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

Ab Version 7.0 können die Bezeichnungen auch über das i18n Objekt geändert werden:

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