quickInfo Erweiterung

Weitere Informationen zur quickInfo-Erweiterung finden Sie im Artikel Quick Info (Touch-Unterstützung).
Das quickInfo-Objekt stellt folgende API bereit:

Methoden

• show (id): void – öffnet das Quick Info Popup für ein bestimmtes Element
  • id – (number | string) – die Aufgaben-ID

gantt.ext.quickInfo.show("1");

• show (x, y): void – öffnet das Quick Info Popup an den angegebenen Koordinaten
  • x – (number | string) – horizontale Koordinate
  • y – (number | string) – vertikale Koordinate

gantt.ext.quickInfo.show(10,30);

• hide (force): HTMLElement – schließt das Quick Info Popup. Wenn gantt.config.quick_info_detached auf false gesetzt ist, verschwindet das Popup nach einer kurzen Animation. Wird true als Argument übergeben, wird die Animation übersprungen und das Popup sofort entfernt.
  • force? – (boolean) – bestimmt, ob das Popup sofort ohne Animation ausgeblendet wird

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// Popup mit kurzer Animation ausblenden
gantt.ext.quickInfo.hide();
 
// Popup sofort ausblenden
gantt.ext.quickInfo.hide(true);

• setContainer (container): void – legt den Container fest, in dem das Quick Info angezeigt wird. Wenn kein Container angegeben wird, wird QuickInfo in den ersten verfügbaren Knoten eingefügt: gantt.$task, gantt.$grid, gantt.$root
  • container – (HTMLElement | string) – Containerelement oder dessen ID

gantt.ext.quickInfo.setContainer(document.body);
gantt.ext.quickInfo.show(1300,100);

• getNode (): HTMLElement | null – ruft das HTMLElement des Quick Info Popups ab. Gibt null zurück, wenn Quick Info nicht initialisiert wurde

const node = gantt.ext.quickInfo.getNode();

Das DOM-Element des angezeigten Quick Info sieht folgendermaßen aus:

• setContent (config): void – füllt das Quick Info mit Inhalt
  • config? – (object) – optionales Konfigurationsobjekt für das Quick Info, das folgende Eigenschaften enthalten kann:
    • taskId? – (string | number) – optional, die ID der Aufgabe, die mit den Aktionsschaltflächen des Quick Info verknüpft ist
    • header? – (object) – optional, der Header des Popup-Bearbeitungsformulars, der enthalten kann:
      • title? – (string) – optional, der Titel des Popup-Bearbeitungsformulars
      • date? – (string) – optional, das Datum des Popup-Bearbeitungsformulars
    • content? – (string) – optional, der Inhalt des Popup-Bearbeitungsformulars
    • buttons? – (string[]) – optional, Schaltflächen, die im Popup-Bearbeitungsformular angezeigt werden sollen
      Wenn sowohl Header als auch Buttons weggelassen werden, werden die entsprechenden Bereiche des Quick Info Popups ausgeblendet.

Ein Beispiel für ein Konfigurationsobjekt für die setContent-Methode:

const quickInfo = gantt.ext.quickInfo;
var task = gantt.getTask(10);
quickInfo.show(task.id);
quickInfo.setContent({
    taskId: task.id,
    header: {
        title: gantt.templates.quick_info_title(task.start_date, task.end_date, task),
        date: gantt.templates.quick_info_date(task.start_date, task.end_date, task)
    },
    content: gantt.templates.quick_info_content(task.start_date, task.end_date, task),
    buttons: gantt.config.quickinfo_buttons
});

Alternativ

Ein benutzerdefiniertes Popup kann ohne Header und Buttons erstellt werden:

const quickInfo = gantt.ext.quickInfo;
quickInfo.show(100, 100);
quickInfo.setContent({
    content: "my custom html",
    buttons: []
});

Zurück nach oben