Элемент управления Radio Button

Это набор опций, из которых можно выбрать только одну.

Radio Button

Related sample:  Radio control

Инициализация

Чтобы включить элемент управления radio button в лайтбокс, выполните следующие шаги:

1) Добавьте новый раздел в конфигурацию лайтбокса:

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: "radio", options: [opts]},     {name: "time", type: "duration", map_to: "auto"}
];

2) Присвойте метку разделу:

gantt.locale.labels.section_priority = "Priority";

Related sample:  Radio control

Свойства

Ниже приведены ключевые свойства, которые обычно используются для элемента управления radio button (полный список можно найти здесь):

  • name - (string) указывает имя раздела
  • map_to - (string) связывает раздел с данными
  • type - (string) указывает тип элемента управления раздела
  • options - (array) определяет доступные опции для элемента управления. Это относится к элементам select, checkbox и radio. Каждый объект в массиве представляет собой опцию со следующими свойствами:
    • key - (string) уникальный ID для опции, который сравнивается со свойством данных задачи для сопоставления опций с задачами
    • label - (string) текст, отображаемый для опции
  • focus - (boolean) если установлено в true, раздел будет сфокусирован при открытии лайтбокса
  • default_value - (any) задает значение по умолчанию для элемента управления, применяется только если значение не предоставлено

Заполнение элемента управления данными

Для определения значений для элемента управления radio button используется параметр options:

gantt.config.lightbox.sections = [      
    {name: "priority", map_to: "priority", type: "radio", options: [
        {key: 1, label: "High"},
        {key: 2, label: "Normal"},
        {key: 3, label: "Low"},
    ]}      
];

Каждый элемент в параметре options требует этих двух свойств:

  • key - уникальный ID для опции
  • label - текст, отображаемый для опции
К началу