Настройка Элементов Lightbox

Lightbox - это форма редактирования, используемая для изменения деталей задачи. Ниже приведен пример стандартного lightbox.

Lightbox может различаться в зависимости от типа и специфических характеристик задач, с которыми он связан. Детали конфигурации для каждого типа задачи хранятся в объекте lightbox. Эти конфигурации включают:

• gantt.config.lightbox.sections - используется для стандартных задач.
• gantt.config.lightbox.project_sections - специфично для проектных задач.
• gantt.config.lightbox.milestone_sections - адаптировано для контрольных точек.

Вы также можете создать пользовательский тип и настроить для него специфическую структуру lightbox. Дополнительные детали доступны в статье: Типы Задач.

Общая структура для типов задач включает:

• sections? - (LightboxSection[]) - необязательно, определяет секции lightbox для стандартных задач
• project_sections? - (LightboxSection[]) - необязательно, определяет секции lightbox для проектных задач
• milestone_sections? - (LightboxSection[]) - необязательно, определяет секции lightbox для контрольных точек
• [lightboxType: string] - (LightboxSection[] | undefined) - определяет секции lightbox для пользовательских типов задач

Структура Lightbox

Секции

Структура lightbox определяется свойством sections в объекте lightbox:

//определение стандартного lightbox   
gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea", focus:true},
    {name:"time",        height:72, map_to:"auto", type:"duration"}
];

Каждый элемент в массиве sections представляет собой конкретную секцию lightbox, определяемую своим набором свойств.

Контролы секций

Каждая секция в lightbox связана с определенным типом контрола. Вот доступные типы контролов для секций lightbox:

• Textarea - поле для ввода многострочного текста
• Time - селекторы для установки длительности задачи путем указания даты начала и окончания
• Duration - селекторы для установки длительности задачи с использованием даты начала и количества дней
• Select - простое выпадающее меню
• Typeselect - выпадающее меню для изменения типа задачи
• Parent - выпадающее меню для выбора родительской задачи
• Template - контейнер для пользовательского HTML-контента
• Checkbox - флажок для переключения опций или значений
• Radio button - переключатель для выбора одного варианта из набора
• Resources - контрол для назначения нескольких ресурсов задаче
• Constraint - контрол для установки ограничений задачи
• Baselines - контрол для определения базовых линий задачи

var opts = [
    { key: 1, label: 'High' },
    { key: 2, label: 'Normal' },
    { key: 3, label: 'Low' }
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority",    height:22, map_to:"priority", type:"select", options:opts},
    {name:"time",        height:72, map_to:"auto", type:"duration"}
];

К началу