Frontend Code-Form Builder (FCFB) - типы полей с выбором из списка

Это продолжение первого поста, где дано описание более простых полей. В этой документации начнем с  поля select. Большинство настроек данного поля применяемы также и к другим полям.

select

Часть настроек данного поля смотрите в документации к полю "text". Поле поддерживает зависимые списки.

[

'type' => 'select',

'id' => 'category',

'label' => 'Выбрать категорию',

//Текст по умолчанию

'placeholder' => '--не выбрано--',

//Кнопка сброса выбранного пункта

'clear' => true,

//Зависимые поля, указывается только у первого поля. Для этой настройки будет отдельное описание.

'dependent' => false,

//Источник данных (array/post_type/taxonomy/user/callback)

'source' => 'post_type',

//Атрибуты запроса (задаются в настройках поля в зависимости от источника данных)

//для array - задается массив данных, post_type - создаете запрос аналогично wp_query, taxonomy - аналогично get_terms, user - аналогично get_users, callback - указывается часть названия фильтра, где вы сами определяете источник данных. (поля offset, search не действительны )

'query' => [

'post_type' => 'post'

],

//Не показывать html поля если элементы не найдены. false - показывать

'hide_empty' => false,

//Массив ключей meta_key, которые можно получить дополнительно

'meta_key' => [],

]

select_hierarchical

Аналог select  с вложенными полями.

[

'type' => 'select_hierarchical',

'id' => 'size533',

'label' => 'Размер',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Большой синий',

'value' => '15',

'parent' => '1',

],

[

'name' => 'Большой белый',

'value' => '34',

'parent' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

[

'name' => 'Маленький синий',

'value' => '155',

'parent' => '3',

],

[

'name' => 'Маленький белый',

'value' => '345',

'parent' => '3',

],

],

//Родительский элемент, вложенные элементы которого нужно показать. Больше актуально для древовидных таксономий и типов записей.

'parent_hierarchical' => 0

]

multiselect - множественный выбор

[

'type' => 'multiselect',

'id' => 'tags',

'label' => 'Выбрать метки',

//Текст по умолчанию

'placeholder' => '--не выбрано--',

//Источник данных (array/post_type/taxonomy/user/callback)

'source' => 'taxonomy',

//Параметры запроса (задаются в настройках поля в зависимости от источника данных)

//для array - задается массив данных, post_type - создаете запрос аналогично wp_query, taxonomy - аналогично get_terms, user - аналогично get_users, callback - указывается часть названия фильтра, где вы сами определяете источник данных

//поля offset, search не действительны

'query' => [

'taxonomy' => 'post_tag',

'hide_empty' => false,

],

//Не показывать html поля если элементы не найдены. false - показывать

'hide_empty' => false,

//Массив названий meta_key, которые нужно получить дополнительно

'meta_key' => [],

]

multiselect_hierarchical

Множественный выбор с древовидной структурой.

[

'type' => 'multiselect_hierarchical',

'id' => 'size73',

'label' => 'Размер',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Большой синий',

'value' => '15',

'parent' => '1',

],

[

'name' => 'Большой белый',

'value' => '34',

'parent' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

[

'name' => 'Маленький синий',

'value' => '155',

'parent' => '3',

],

[

'name' => 'Маленький белый',

'value' => '345',

'parent' => '3',

],

],

//Родительский элемент, вложенные элементы которого нужно показать. Больше актуально для древовидных таксономий и типов записей.

'parent_hierarchical' => 0

]

radio - в виде кружков

Поле поддерживает зависимые списки.

[

'type' => 'radio',

'id' => 'size',

'label' => 'Размер',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

],

//Ширина отдельного элемента. В зависимости от ширины элементы могут распологаться горизонтально или столбиком.

'we' => '100%',

//Максимальная высота списка элементов (добавляется скролл если больше)

'hi' => '205px',

//Разрешить снять отметку с радиокнопки при повторном нажатии

'uncheck' => true,

]

radio_hierarchical

Данный тип поля это аналог radio с неограниченной вложенностью элементов.

[

'type' => 'radio_hierarchical',

'id' => 'size2',

'label' => 'Размер',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Большой синий',

'value' => '15',

'parent' => '1',

],

[

'name' => 'Большой белый',

'value' => '34',

'parent' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

[

'name' => 'Маленький синий',

'value' => '155',

'parent' => '3',

],

[

'name' => 'Маленький белый',

'value' => '345',

'parent' => '3',

],

],

]

radio_btn - radio в виде кнопок

Поле поддерживает зависимые списки.

[

'type' => 'radio_btn',

'id' => 'size3',

'label' => 'Кнопки',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

],

//Ширина отдельного элемента.

'we' => 'auto'

]

checkboxlist - список чекбоксов

Данное поле это практически полный аналог "radio" по настройкам, но с множественным выбором.

[

'type' => 'checkboxlist',

'id' => 'size5',

'label' => 'Размер',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

],

//Ширина отдельного элемента. В зависимости от ширины элементы могут располагаться горизонтально или столбиком.

'we' => 'auto',

//Максимальная высота списка элементов (добавляется скролл если больше)

'hi' => '205px',

]

checkbox_hierarchical

Данный тип поля это аналог radio_hierarchical, но с множественным выбором и неограниченной вложенностью элементов.

[

'type' => 'checkbox_hierarchical',

'id' => 'size27',

'label' => 'Размер',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Большой синий',

'value' => '15',

'parent' => '1',

],

[

'name' => 'Большой белый',

'value' => '34',

'parent' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

[

'name' => 'Маленький синий',

'value' => '155',

'parent' => '3',

],

[

'name' => 'Маленький белый',

'value' => '345',

'parent' => '3',

],

],

]

checkbox_btn - чекбоксы в виде кнопок

[

'type' => 'checkbox_btn',

'id' => 'size32',

'label' => 'Кнопки',

'source' => 'array',

//Массив с данными

'array' => [

[

'name' => 'Большой',

'value' => '1',

],

[

'name' => 'Средний',

'value' => '2',

],

[

'name' => 'Маленький',

'value' => '3',

],

],

//Ширина отдельного элемента.

'we' => 'auto',

]

phone

Для работы маски телефона, в конфиге формы необходимо  подключить скрипт maskedinput.

[

'type' => 'phone',

'id' => 'phone',

'label' => 'Телефон компании',

'def' => ['+7'],

'placeholder' => '+7 (___) ___ __ __',

//Массив данных для выбора страны (страна, код, маска телефона). Обязательная настройка.

'array' => [

[

'name' => 'Россия <span>+7</span>',

'value' => '+7',

'mask' => '+7 (___) ___ __ __',

],

[

'name' => 'Армения <span>+374</span>',

'value' => '+374',

'mask' => '+374 (__) __ __ __',

],

],

]

date

Для работы данного поля, в конфиге формы нужно подключить скрипт datetime.  Данное поле имеет дополнительные необязательные настройки, которые позволяют ограничить или исключить для выбора некоторые даты в календаре.

[

'type' => 'date',

'id' => 'date',

'label' => 'Дата',

//Минимальная дата

'min' => '2020-06-11',

//Максимальная дата

'max' => '2026-04-11',

//Исключить даты

'exclude_dates' => ['2024-04-11', '2028-04-13'],

//Исключить дни недели (любой месяц)

'exclude_days_week' => [6, 7],

//Исключить дни месяца (месяц-день) (любой год)

'exclude_days_month' => ['04-03', '04-16'],

]

datetime - дата и время

Для работы данного поля, в конфиге формы нужно подключить скрипт datetime.  Данное поле имеет дополнительные необязательные настройки, которые позволяют ограничить или исключить для выбора некоторые даты и время в календаре.

[

'type' => 'datetime',

'id' => 'datetime',

'label' => 'Дата и время',

//Минимальная дата

'min' => '2020-06-11',

//Максимальная дата

'max' => '2026-04-11',

//Исключить даты

'exclude_dates' => ['2024-04-11', '2028-04-13'],

//Исключить дни недели (любой месяц)

'exclude_days_week' => [6,7],

//Исключить дни месяца (месяц-день) (любой год)

'exclude_days_month' => ['04-03','04-16'],

//Минимальное время (любой день)

'min_time' => '10:30:00',

//Максимальное время (любой день)

'max_time' => '20:22:00',

//Исключить часы (любой день)

'exclude_hours' => ['14', '07'],

]