quickInfo-Erweiterung

Für detailliertere Informationen über die quickInfo-Erweiterung, siehe den Artikel Schnellinfo (Touch-Unterstützung).
Das quickInfo-Objekt bietet die folgende API:

Methoden

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

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

• show (x, y): void - öffnet das Quick-Info-Popup an bestimmten Bildschirmkoordinaten.
  • x - (number | string) - die horizontale Koordinate.
  • y - (number | string) - die 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. Wenn das Argument auf true gesetzt ist, wird das Popup sofort entfernt, ohne die Animation.
  • force? - (boolean) - bestimmt, ob das Popup sofort ohne Animation geschlossen werden soll.

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// Schließen des Popups mit Animation
gantt.ext.quickInfo.hide();
 
// Sofortiges Schließen des Popups
gantt.ext.quickInfo.hide(true);

• setContainer (container): void - definiert einen spezifischen Container für das Quick-Info-Popup. Wenn kein benutzerdefinierter Container festgelegt ist, erscheint das Popup in einem der folgenden Knoten: gantt.$task, gantt.$grid, gantt.$root.
  • container - (HTMLElement | string) - das Containerelement oder dessen ID.

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

• getNode (): HTMLElement | null - ruft das DOM-Element des Quick-Info-Popups ab. Wenn das Popup nicht initialisiert ist, wird null zurückgegeben.

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

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

• setContent (config): void - aktualisiert den Inhalt des Quick-Info-Popups.
  • config? - (object) - ein optionales Konfigurationsobjekt für das Quick-Info-Popup. Es kann die folgenden Attribute enthalten:
  • taskId? - (string | number) - optional, verknüpft die Aktionsschaltflächen des Quick-Infos mit einer bestimmten Aufgaben-ID.
  • header? - (object) - optional, definiert den Header des Popups, der enthalten kann:
    • title? - (string) - optional, gibt den Titel des Headers an.
    • date? - (string) - optional, gibt das Datum des Headers an.
  • content? - (string) - optional, legt den Hauptinhalt des Popups fest.
  • buttons? - (string[]) - optional, definiert die Schaltflächen, die im Popup angezeigt werden sollen.
    Wenn kein Header oder keine Schaltflächen bereitgestellt werden, bleiben diese Abschnitte des Popups verborgen.

Hier ist ein Beispiel für die Konfiguration der 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 kann ein benutzerdefiniertes Popup ohne Header oder Schaltflächen erstellt werden:

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

Zurück nach oben