quickInfo Расширение

Для получения более детальной информации о расширении quickInfo обратитесь к статье Быстрая информация (Поддержка касания).
Объект quickInfo предоставляет следующий API:

Методы

show (id): void - открывает тултип для конкретного элемента.
- id - (number | string) - ID задачи.

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

show (x, y): void - открывает тултип в определённых координатах экрана.
- x - (number | string) - горизонтальная координата.
- y - (number | string) - вертикальная координата.

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

hide (force): HTMLElement - закрывает тултип. Если gantt.config.quick_info_detached установлен в false, тултип исчезнет после короткой анимации. Если аргумент установлен в true, тултип будет удалён мгновенно, без анимации.
- force? - (boolean) - определяет, должен ли тултип закрыться мгновенно без анимации.

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// Закрыть тултип с анимацией
gantt.ext.quickInfo.hide();
 
// Закрыть тултип мгновенно
gantt.ext.quickInfo.hide(true);

setContainer (container): void - определяет конкретный контейнер для тултипа. Если пользовательский контейнер не установлен, тултип появится в одном из следующих узлов: gantt.$task, gantt.$grid, gantt.$root.
- container - (HTMLElement | string) - элемент контейнера или его ID.

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

getNode (): HTMLElement | null - получает DOM-элемент тултипа. Если тултип не инициализирован, возвращает null.

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

DOM-элемент отображаемого тултипа выглядит следующим образом:

setContent (config): void - обновляет содержимое тултипа.
- config? - (object) - необязательный объект конфигурации для тултипа. Может включать следующие атрибуты:
  - taskId? - (string | number) - необязательный, связывает кнопки действий тултипа с определённым ID задачи.
  - header? - (object) - необязательный, определяет заголовок тултипа, который может включать:
    - title? - (string) - необязательный, указывает заголовок.
    - date? - (string) - необязательный, указывает дату в заголовке.
  - content? - (string) - необязательный, задаёт основное содержимое тултипа.
  - buttons? - (string[]) - необязательный, определяет кнопки для отображения в тултипе.
    Если заголовок или кнопки не указаны, эти секции тултипа останутся скрытыми.

Вот пример конфигурации для метода setContent:

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
});

Альтернативно, можно создать пользовательский тултип без заголовка и кнопок:

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

К началу