Gantt ermöglicht die Navigation seiner Elemente mit Tastenkombinationen. Diese Anleitung erklärt, wie man die Tastaturnavigation aktiviert und nutzt, einschließlich des Fokusverhaltens, der integrierten Tastenkombinationen und wie man eigene erstellt.
Um die Tastaturnavigation im Gantt-Diagramm zu aktivieren, aktivieren Sie das keyboard_navigation Plugin mit der gantt.plugins Methode:
gantt.plugins({
keyboard_navigation: true
});
Die API für das gantt.ext.keyboardNavigation Objekt wird im Artikel Erweiterung zur Tastaturnavigation detailliert beschrieben.
Es gibt zwei Arten der Tastaturnavigation:
Navigation nach Aufgabenzeilen: Aktivieren Sie dies, indem Sie die keyboard_navigation Eigenschaft auf true setzen.
Navigation nach Aufgabenzellen: Aktivieren Sie dies, indem Sie die keyboard_navigation_cells Eigenschaft auf true setzen.
Durch Drücken der Tabulatortaste wird der Fokus auf Gantt gelegt, genau wie bei jedem anderen Element. Sobald der Fokus gesetzt ist, können Sie mit den Pfeiltasten und anderen Tastenkombinationen navigieren. Durch erneutes Drücken der Tabulatortaste wird der Fokus von Gantt auf ein anderes Seitenelement verschoben.
Wenn ein modales Fenster (wie ein Lightbox oder ein Bestätigungsfenster) geöffnet wird, verschiebt sich der Fokus von Gantt auf das Modal und ermöglicht die Navigation darin wie in einem normalen Formular. Sobald das Modal geschlossen wird, kehrt der Fokus zu Gantt zurück.
Um den Fokus manuell auf Gantt zurückzusetzen, verwenden Sie die focus Methode. Wenn der Fokus wiederhergestellt wird, richtet er sich auf das aktive Element innerhalb von Gantt, die erste Zeile oder das zuletzt ausgewählte Element.
Standardnavigation in modalen Fenstern umfasst:
Wenn ein Button im Formular fokussiert ist, löst das Drücken von Space oder Enter die Aktion des Buttons aus.
Wenn eine Rasterzelle oder -zeile fokussiert ist und Sie auf ein benutzerdefiniertes HTML-Element innerhalb von Gantt klicken, kehrt der Fokus zur Rasterzelle/-zeile zurück.
Ab Version 7.1.13 verhindert das Hinzufügen der Klasse 'no_keyboard_navigation' zu einem benutzerdefinierten Element, dass der Fokus zur Rasterzelle/-zeile zurückkehrt.
Tastenkombinationen können je nach Kontext (oder Bereich) unterschiedliche Aktionen auslösen. Das Gantt-Diagramm hat die folgenden Bereiche:
Wenn dieselbe Tastenkombination mehreren Bereichen zugewiesen ist, hat der spezifischere Vorrang. Zum Beispiel überschreibt eine Tastenkombination, die einem bestimmten Element zugeordnet ist, dieselbe Tastenkombination, die dem gesamten Gantt-Diagramm zugeordnet ist.
Um eine benutzerdefinierte Tastenkombination hinzuzufügen, verwenden Sie die addShortcut Methode. Sie erfordert drei Parameter:
Beispiel:
gantt.addShortcut("shift+w", function(e){
var task = gantt.locate(e);
if(task)
gantt.showQuickInfo(task)
},"taskRow");
Um eine Tastenkombination zu entfernen, verwenden Sie die removeShortcut Methode. Sie erfordert zwei Parameter:
Beispiel:
gantt.removeShortcut("shift+w","taskRow");
Um die Handler-Funktion für eine Verknüpfung abzurufen, verwenden Sie die getShortcutHandler Methode. Sie benötigt zwei Parameter:
Beispiel:
var shortcut_handler = gantt.getShortcutHandler("shift+w","taskRow");
Die Methode gibt die Funktion zurück, die die Verknüpfung behandelt.
Tastenkombinationen können bestehen aus:
Mehrere Tastenkombinationen für dieselbe Aktion können aufgelistet und durch Kommas getrennt werden (z.B. "ctrl+a, ctrl+space").
Das Gantt-Diagramm enthält mehrere integrierte Tastenkombinationen für die Navigation:
Related sample: Keyboard Navigation
Für ein Beispiel, wie man das Kopieren/Einfügen von Aufgaben mit Ctrl+C/Ctrl+V implementiert, siehe den zugehörigen Artikel.
Related sample: Keyboard Navigation - navigate cells
Ab Version 4.2 können Sie die Zeitleiste horizontal scrollen mit:
-> Shift Taste + Mausradbewegung.
Ab Version 6.3 können Sie die horizontale Scrolltaste auf Alt oder Meta anstelle der standardmäßigen Shift Taste konfigurieren, indem Sie die horizontal_scroll_key Eigenschaft setzen:
gantt.config.horizontal_scroll_key = "altKey";
Um das horizontale Scrollen zu deaktivieren, setzen Sie horizontal_scroll_key auf false:
gantt.config.horizontal_scroll_key = false;