Drupal: Группируем поля в вертикальные вкладки (Vertical Tabs)

17.08.2011

В Drupal 7 появился новый вид группировки полей — Vertical Tabs:

Чтобы воспользоваться такими вкладками в свой форме, нужно:

1. Сгруппировать поля в обычные fieldset-ы:

$form['fieldset1'] = array(
  '#type' => 'fieldset',
  '#title' => 'Fieldset 1',
);

$form['fieldset1']['field1'] = array(
  '#type' => 'textfield',
  '#title' => 'Field 1',
);

$form['fieldset1']['field2'] = array(
  '#type' => 'textfield',
  '#title' => 'Field 2',
);

$form['fieldset2'] = array(
  '#type' => 'fieldset',
  '#title' => 'Fieldset 2',
);

$form['fieldset2']['field3'] = array(
  '#type' => 'textfield',
  '#title' => 'Field 3',
);

...

2. Добавить к форме новый элемент с типом vertical_tabs:

$form['vertical_tabs'] = array(
  '#type' => 'vertical_tabs',
);

3. Добавить fieldset-ам новый параметр '#group', в котором прописать имя элемента из пункта 2:

$form['fieldset1'] = array(
  ...
  '#group' => 'vertical_tabs',
);

$form['fieldset2'] = array(
  ...
  '#group' => 'vertical_tabs',
);

Profit.

Полный листинг:

$form['vertical_tabs'] = array(
  '#type' => 'vertical_tabs',
);

$form['fieldset1'] = array(
  '#type' => 'fieldset',
  '#title' => 'Fieldset 1',
  '#group' => 'vertical_tabs',
);

$form['fieldset1']['field1'] = array(
  '#type' => 'textfield',
  '#title' => 'Field 1',
);

$form['fieldset1']['field2'] = array(
  '#type' => 'textfield',
  '#title' => 'Field 2',
);

$form['fieldset2'] = array(
  '#type' => 'fieldset',
  '#title' => 'Fieldset 2',
  '#group' => 'vertical_tabs',
);

$form['fieldset2']['field3'] = array(
  '#type' => 'textfield',
  '#title' => 'Field 3',
);

...

Написанное актуально для

Drupal 7

Похожие записи

Кстати, для группировки полей в форме редактирования ноды отлично подходит http://drupal.org/project/field_group. Он позволяет перемещать поля в вертикальные вкладки как самого друпала, так и в свои собственные, а также в горизонтальные вкладки и accordition'ы.

Sterm

21.03.2013, 03:01

А в 6-м друпале как?
'#group' => 'vertical_tabs', не работает

Sterm

21.03.2013, 03:34

Все, два часа искал и разобрался

$form['vtabs_demo'] = array(
   '#type' => 'fieldset',
   '#title' => t('demo'),
   '#weight' => 0,
);

  $form['vtabs_demo']['field_checkbox'] = array(
    '#type' => 'checkbox',
    '#title' => t('demo'),
  );

 $form['#pre_render'][] = 'vertical_tabs_form_pre_render';

Sterm

21.03.2013, 03:36

Да, только ж главное не забыть модуль Vertical Tabs установить)

eriks

08.04.2013, 16:14

Замечательный пост, как всегда. Вопрос в добавлении пояснений, как в модуле block. Есть желание заполнять без js. Есть ли какой-нибудь способ заполнить это поле дескрипшеном?

eriks

08.04.2013, 16:17

Блин. Код не высветился. Да и ладно... С чего я взял что мне помогут...

urfin juice

31.01.2018, 20:12

Что бы разместить вертикальные вкладки внутри другого фиелдсета нужно сделать что-то типа такого:

$form['wrapper']['email'] = array(
    '#type' => 'vertical_tabs',
);
$form['wrapper'] = array(
    '#type' => 'fieldset',
    '#title' => t('Welcome'),
    '#collapsible' => TRUE,
    '#description' => t('Edit the welcome e-mail messages sent to new member accounts created by an administrator.') . ' ' . $email_token_help,
    '#tree' => TRUE,
  );
$form['wrapper']['email_admin_created'] = array(
    '#type' => 'fieldset',
    '#title' => t('Welcome (new user created by administrator)'),
    '#collapsible' => TRUE,
    '#collapsed' => (variable_get('user_register', USER_REGISTER_VISITORS_ADMINISTRATIVE_APPROVAL) != USER_REGISTER_ADMINISTRATORS_ONLY),
    '#description' => t('Edit the welcome e-mail messages sent to new member accounts created by an administrator.') . ' ' . $email_token_help,
    '#group' => 'wrapper][email',
  );

Гость

05.11.2018, 16:06

А как присвоить отдельный класс к каждой вкладке? Два месяца как ищу уже никак найти не могу ответ

xandeadx

05.11.2018, 16:26

'#type' => 'fieldset',
'#attributes' => array(
  'class' => array('class-name'),
),

Drupal → Группируем поля в вертикальные вкладки (Vertical Tabs)

Комментарии

Добавить комментарий