Расширение quickInfo

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

Методы

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

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

• show (x, y): void - открывает тултип quick info по заданным координатам
  • x - (number | string) - горизонтальная координата
  • y - (number | string) - вертикальная координата

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

• hide (force): HTMLElement - закрывает тултип quick info. Если 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 - задаёт контейнер, в котором будет отображаться quick info. Если контейнер не указан, QuickInfo будет вставлен в первый доступный узел из: 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 - возвращает HTMLElement тултипа quick info. Возвращает null, если тултип ещё не инициализирован

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

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

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

Пример объекта конфигурации для метода 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: []
});

К началу