Beispiele Forum Unterstützung
Dokumentation
StartAnleitungenAllgemeine Funktionen

Popup-Nachrichten und Modale Boxen

Nachrichten im Gantt-Diagramm dienen als Benachrichtigungen für verschiedene Zwecke, wie Fehler, Bestätigungen oder das Auswählen von Optionen. Diese Nachrichten basieren auf einem Fork des dhtmlxMessage-Repositories, sodass alle dessen Funktionen hier ebenfalls gelten.

Es gibt zwei Haupttypen von Nachrichten: eine einfache Popup-Nachricht und eine modale Nachrichtenbox mit Schaltflächen, die den Arbeitsablauf der Anwendung unterbrechen.

Modale Nachrichtenboxen gibt es in drei Typen:

Einfache Popup-Nachricht

Um eine einfache Popup-Nachricht zu erstellen, wird die Methode gantt.message verwendet. Der erforderliche Parameter für diese Methode ist der Nachrichtentext:

gantt.message("Die Aufgabe wurde aktualisiert");

Es gibt drei Stile von Nachrichtenboxen:

  • Standardnachrichtenbox (type:"info")

  • Fehlermeldungsbox (type:"error")

  • Warnmeldungsbox (type:"warning")

Um den Typ der Nachrichtenbox anzugeben, verwenden Sie die type-Eigenschaft mit dem gewünschten Wert:

// Erstellen einer Fehlermeldungsbox
gantt.message({type:"error", text:"Ungültiges Datenformat"});

Related sample:  Gantt message types

Um benutzerdefinierte Stile auf eine Nachrichtenbox anzuwenden, kann eine CSS-Klasse mit dem type-Parameter zugewiesen werden, wie hier erklärt.

Positionierung von Nachrichtenboxen

Standardmäßig erscheinen Popup-Nachrichten in der oberen rechten Ecke des Fensters und unterbrechen die übergeordnete Anwendung nicht, im Gegensatz zu modalen Nachrichtenboxen, die die App überlagern und blockieren. Die Position einer Nachrichtenbox kann über die Eigenschaft gantt.message.position angepasst werden:

gantt.message.position = 'bottom';

Related sample:  Message position

Die verfügbaren Positionsoptionen sind:

  • top - positioniert die Nachrichtenbox in der oberen rechten Ecke (Standard).
  • bottom - platziert die Nachrichtenbox in der unteren rechten Ecke.
  • left - positioniert die Nachrichtenbox auf der linken Seite unter dem Gantt-Diagramm.
  • right - platziert die Nachrichtenbox auf der rechten Seite unter dem Gantt-Diagramm.

Ablaufintervall

Die Zeit, die eine Nachrichtenbox sichtbar bleibt, kann mit dem expire-Parameter angepasst werden, der in Millisekunden festgelegt wird. Standardmäßig beträgt das Ablaufintervall 4000 Millisekunden.

Das Intervall kann angepasst oder vollständig deaktiviert werden, indem der expire-Parameter auf "-1" gesetzt wird. In diesem Fall verschwindet die Nachricht nur, wenn sie angeklickt wird.

gantt.message({
    type:"error", 
    text:"Ungültiges Datenformat",
    expire:10000
});

Ausblenden einer Nachrichtenbox mit der API

Um eine Nachrichtenbox manuell auszublenden, ohne auf ihr automatisches Verschwinden zu warten, kann die Methode gantt.message.hide(boxId) verwendet werden. Die Methode erfordert:

  • boxId - die beim Erstellen der Box zugewiesene ID.
gantt.message({
    id:"myBox",
    text:"Seite ist geladen"
});
 
gantt.message.hide("myBox");

Modale Nachrichtenboxen

Modale Nachrichtenboxen unterbrechen den Arbeitsablauf der Anwendung, bis eine bestimmte Aktion durchgeführt wird, in der Regel durch Klicken auf eine Schaltfläche. Sie schließen sich, wenn eine Schaltfläche geklickt wird, und eine Rückruffunktion (falls bereitgestellt) wird ausgeführt.

Es gibt drei Arten von modalen Nachrichtenboxen:

Gemeinsame Eigenschaften für diese Boxen umfassen:

  • id - die eindeutige Kennung für die Box.
  • title - der Kopftext.
  • type - der Typ der Nachricht (z. B. Warnung oder Fehler).
  • text - der Hauptinhalt der Box.
  • ok - die Beschriftung für die "OK"-Schaltfläche.
  • cancel - die Beschriftung für die "Abbrechen"-Schaltfläche (für Bestätigungsboxen).
  • callback - eine Funktion, die beim Klicken auf die Schaltfläche ausgelöst wird und true oder false je nach gedrückter Schaltfläche akzeptiert.
  • position - unterstützt derzeit "top"; andere Werte zentrieren die Box.
  • width - die Breite der Box (z. B. "100px", "50%").
  • height - die Höhe der Box (z. B. "100px", "50%").

Alarmnachrichtenbox

Eine Alarmbox enthält eine "OK"-Schaltfläche. Der Text für diese Schaltfläche kann über den ok-Parameter festgelegt werden.

  • Kurzform (nur der Nachrichtentext wird bereitgestellt, andere Parameter verwenden Standardwerte):
gantt.alert("Text");
  • Vollständige Form (spezifiziert zusätzliche Parameter):
gantt.alert({
    text:"einige Texte",
    title:"Fehler!",
    ok:"Ja",
    callback:function(){...}
});

Bestätigungsnachrichtenbox

Eine Bestätigungsbox hat zwei Schaltflächen: "OK" und "Abbrechen". Ihre Beschriftungen können mit den entsprechenden Eigenschaften angepasst werden.

  • Kurzform:
gantt.confirm("BestätigenText");
  • Vollständige Form:
gantt.confirm({
    text: "Fortfahren?",
    ok:"Ja", 
    cancel:"Nein",
    callback: function(result){
        gantt.message("Ergebnis: "+result);
    }
});

Eine Modalbox hat einige einzigartige Funktionen:

  • Ihr text kann HTML-Inhalt enthalten.
  • Sie kann mehrere Schaltflächen haben, die im buttons-Array definiert sind.
  • Die callback-Funktion erhält den Index der ausgewählten Schaltfläche.
gantt.modalbox({
    title:"Einstellungen",
    text: " ... html code here... ",
    buttons:["Speichern", "Standard", "Abbrechen"],
    callback: function(result){
        gantt.alert(result);
    }
});

Konfigurieren von Modalbox-Schaltflächen

Schaltflächen in einer Modalbox können auf zwei Arten eingerichtet werden:

  • Kurzform:
gantt.modalbox({
    // andere Einstellungen
    buttons:["Speichern", "Löschen", "Abbrechen"],
    callback: function(result){
        switch(result){
            case "0":
                //Speichern
                break;
            case "1":
                //Löschen
                break;
            case "2":
                //Abbrechen
                break;
        }   
    }
});

Die Rückruffunktion erhält den in Zeichenketten umgewandelten Index der geklickten Schaltfläche ("0", "1", "2", usw.). Jede Schaltfläche erhält eine CSS-Klasse basierend auf ihrem Etikett, in Kleinbuchstaben umgewandelt (z. B. gantt_save_button, gantt_delete_button, gantt_cancel_button). Diese Klassen können gestylt werden:

.gantt_delete_button div{
    background:red;
}

Wenn mehrere Popups denselben Schaltflächennamen verwenden, aber unterschiedliche Stile benötigen, kann die type-Konfiguration verwendet werden:

gantt.modalbox({
    // andere Einstellungen
    type:"special_popup",
    buttons:["Speichern", "Löschen", "Abbrechen"]
});

Der type wird mit "gantt_" vorangestellt und als Klassenname dem Popup hinzugefügt:

.gantt_special_popup .gantt_delete_button div{
    background:red;
}
  • Vollständige Form:

Dieser Ansatz ermöglicht die explizite Konfiguration von CSS-Klassen und Rückgabewerten der Schaltflächen:

gantt.modalbox({
    // andere Einstellungen
    buttons: [
        { label:"Speichern",   css:"link_save_btn",   value:"speichern" },
        { label:"Abbrechen", css:"link_cancel_btn", value:"abbrechen" },
        { label:"Löschen", css:"link_delete_btn", value:"löschen" }
    ],
    callback: function(result){
        switch(result){
            case "speichern":
                //Speichern
                break;
            case "abbrechen":
                //Abbrechen
                break;
            case "löschen":
                //Löschen
                break;
        }
    }
});

Der label-Parameter ist erforderlich, während css und value optional sind. Wenn sie weggelassen werden, wird das CSS aus dem Kleinbuchstaben-Etikett abgeleitet, und der Button-Index wird als Wert verwendet.

Das css wird mit "gantt_" vorangestellt und als Klassenname der Schaltfläche hinzugefügt:

.gantt_link_delete_btn div{
    background:red;
}

Ausblenden von Modalen Nachrichtenboxen

Um eine modale Nachrichtenbox manuell auszublenden, verwenden Sie die Methode gantt.modalbox.hide(). Sie erfordert den div-Container der Modalbox:

var box = gantt.modalbox({  
    title:"Einstellungen",
    text: " ... html code here... ",
    buttons:["Speichern", "Standard", "Abbrechen"],
    callback: function(result){
        gantt.alert(result);
    }
});
 
gantt.modalbox.hide(box);

Für alarm und confirm modale Boxen wird dieselbe Methode verwendet:

var box = gantt.confirm({
    text: "Fortfahren?",
    ok:"Ja", 
    cancel:"Nein",
    callback: function(result){
        gantt.message("Ergebnis: "+result);
    }
});
 
gantt.modalbox.hide(box);

Wie Gantt Modalbox-Schaltflächen behandelt

Standardmäßig werden Schaltflächen in Gantt mit einfachem Text benannt. Wenn Sie ein HTML-Element als Schaltflächennamen verwenden (wie das Text fett machen oder ein Symbol hinzufügen), gibt die Rückruffunktion, die durch das Klicken auf die Schaltfläche ausgelöst wird, null zurück.

Dies geschieht, weil Gantt spezifische Attribute im übergeordneten Element des angeklickten Elements überprüft. Wenn diese Attribute fehlen, ist das Ergebnis null. Darüber hinaus umschließt Gantt alle definierten Schaltflächenelemente in <div>-Tags.

Wenn Sie also auf ein Textelement klicken, ist sein übergeordnetes Element ein leeres <div> ohne die erforderlichen Attribute, was zu null führt. Wenn Sie jedoch außerhalb des Textes auf die Schaltfläche selbst klicken, wird ein übergeordnetes Element mit den erwarteten Attributen ausgelöst, und das Ergebnis ist bedeutungsvoller:

  • true/false für Bestätigungsboxen
  • Für Modalboxen:

Um ein HTML-Element als Schaltflächennamen zu verwenden, müssen Sie es innerhalb von zwei <div>-Elementen umschließen, die beide das data-result-Attribut haben. Hier ist ein Beispiel:

gantt.confirm({
    ok:`<div data-result="ja"><div data-result="ja"><i>Ja</i></div></div>`,
    cancel:`<div data-result="nein"><div data-result="nein"><i>Nein</i></div></div>`,
});
 
gantt.modalbox({
  buttons: [
   { label:`<div data-result="ja">
        <div data-result="ja"><i>Ja</i></div>
     </div>`,   
     css:"link_save_btn", value:"ja" },
   { label:`<div data-result="nein">
        <div data-result="nein"><i>Nein</i></div>
     </div>`, 
     css:"link_cancel_btn", value:"nein" },
   { label:`<div data-result="abbrechen">
        <div data-result="abbrechen"><i>Abbrechen</i></div>
     </div>`, 
     css:"link_cancel_btn", value:"abbrechen" },
  ],
});

Wenn Sie andere Elemente als Schaltflächennamen verwenden möchten, stellen Sie sicher, dass alle übergeordneten Elemente ebenfalls das data-result-Attribut haben. Im Beispiel unten werden <u>-Tags für den Schaltflächennamen verwendet. Diese sowie die beiden <div>-übergeordneten Elemente enthalten das data-result-Attribut:

gantt.confirm({
  ok:`<div data-result="ja">
    <div data-result="ja"><u data-result="ja"><i>Ja</i></u></div>
  </div>`,
  cancel:`<div data-result="nein">
    <div data-result="nein"><u data-result="nein"><i>Nein</i></u></div>
  </div>`,
});
 
gantt.modalbox({
  buttons: [
    { label:`<div data-result="ja">
        <div data-result="ja">
            <u data-result="ja"><i>Ja</i></u>
        </div>
      </div>`,   
      css:"link_save_btn",  value:"ja" },
    { label:`<div data-result="nein">
        <div data-result="nein">
            <u data-result="nein"><i>Nein</i></u>
        </div>
      </div>`, 
      css:"link_cancel_btn", value:"nein" },
    { label:`<div data-result="abbrechen">
        <div data-result="abbrechen">
            <u data-result="abbrechen"><i>Abbrechen</i></u>
        </div>
      </div>`, 
      css:"link_cancel_btn", value:"abbrechen" },
  ],
});

Stilgestaltung

Sie können das Erscheinungsbild einer Nachrichtenbox anpassen, indem Sie Ihre eigenen Stile anwenden. Typischerweise wird eine CSS-Klasse über den type-Parameter angegeben. Diese Klasse definiert das gewünschte Aussehen der Nachrichtenbox.

Beachten Sie beim Festlegen des type-Parameters folgende Punkte:

  • Für alert und confirm Boxen müssen Sie sie mit der 'fensterbezogenen' Methode initialisieren, um eine CSS-Klasse anzuwenden.
  • Für message Boxen müssen Sie sie mit der 'allgemeinen' Methode initialisieren, um eine CSS-Klasse anzuwenden.
  • Der CSS-Klassenname sollte mit dem Präfix gantt- beginnen.
  • Um sicherzustellen, dass der Stil korrekt angewendet wird, definieren Sie die Klasse als .gantt-some div, um Elemente innerhalb einer Gantt-Nachricht anzusprechen.

Hier ist ein Beispiel:

<style type="text/css">
.gantt-myCss div{
    font-weight:bold;
    color:wheat;
    background-color:crimson;
}
</style>
 
gantt.message({ type:"myCss", text:"einige Texte" });

Related sample:  Styling message boxes

Modale Fenster und Tastaturinteraktion

Die Tastaturfunktionalität für modale Boxen wird durch die Eigenschaft gantt.message.keyboard gesteuert, die standardmäßig auf true gesetzt ist.

Standardmäßig blockieren modale Boxen die meisten Tastaturereignisse auf der Seite. Nur wenige Tasten sind funktional:

  • "Leertaste" und "Enter" - geben true als Ergebnis der Modalbox zurück.
  • "Escape" - gibt false als Ergebnis der Modalbox zurück.

Wenn Sie die keyboard-Eigenschaft auf false setzen, werden alle Tastaturereignisse aktiviert, und die oben genannten Tasten haben nicht mehr ihr Standardverhalten:

gantt.message.keyboard = false; 
gantt.modalbox({...});

Dies ist besonders nützlich, wenn Sie die vollständige Tastaturnutzung erlauben müssen, z. B. um Werte in Eingabefelder innerhalb von Modalboxen einzugeben.

Zurück nach oben