quickInfo Erweiterung

Weitere Informationen zur quickInfo-Erweiterung finden Sie im Artikel Quick Info (Touch Support).

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: []
});

Methoden​

Methoden