Изменить класс в оболочке div элемента формы


11

Есть ли способ добавить или изменить класс в оболочку формы (div), используя форму API?

Или это только что сделано с функцией темы?

Если да, то какая функция темы используется, чтобы изменить это?


Я уверен, что это тема функции. Какую функцию темы использовать, вопрос. :)
akalata

Ах, ты здесь.
Chrisjlee

Я думаю, что вы также можете использовать ключ #attribute для определения класса
Мика А.

@Mika A. Это относится только к тегу <input>, я хочу изменить класс оболочки (a <div>).
chrisjlee

Ответы:


5

Вы можете переопределить theme_form_element()как обычно, если вы хотите изменить тему глобально. Если вы заинтересованы в изменении только одного конкретного элемента формы, я знаю несколько вариантов.

  1. Вы можете зарегистрировать новую функцию темы для конкретного типа элемента формы, который вас интересует (например, текстовое поле). Затем вы создаете эту функцию темы (на основе оригинала, например theme_textfield()), но она не вызывается theme('form_element', ...)в конце (вы можете обрабатывать как обертку, так и элемент в одной функции темы, или вы можете создать отдельную функцию темы обертки и использовать это). Наконец, вы добавляете #themeсвойство к определенному элементу формы, и этот элемент получает ваши собственные темы.

  2. Вы можете создать файл шаблона с именем form_element.tpl.phpпо умолчанию, theme_form_element()а затем использовать его hook_preprocess_form_element()для добавления предложения шаблона. Затем вы создаете новый шаблон, который соответствует предложению. Вы часто слышите, как люди упоминают, что шаблоны немного медленнее, чем функции, и для такого часто используемого вызова темы я могу представить, как люди возражают против использования шаблона. Однако я никогда не делал никаких измерений для этого. Кроме того, вам нужно иметь достаточно контекста на этапе предварительной обработки, чтобы сделать предложение.


Не могли бы вы привести пример?
Chrisjlee

@ ChrisJ.Lee Хотите изменить обертку для всех элементов или только для одного конкретного?
Энди

только один.
'23

@ chrisjlee Я обновил ответ.
Энди

4

Я знаю, что это супер старый поток, но я учился, как изменять элементы формы и добавлять классы. Я нашел время для создания собственного модуля:

function yourtheme_custom_form_alter(&$form, &$form_state, $form_id) {
 case'webform_number_whatever':
   _yourtheme_form_add_wrapper($form['submitted']['yourfieldhere'], array('form-field-some-style', 'not-label', 'whatever-other-styles-you-want'));
 break;
}

function _yourtheme_form_add_wrapper(&$element, $classes = array(), $type = array('form-item', 'form-type-textfield'), $removeTitle = FALSE){
  $element['#prefix'] = '<div class="' . implode(" ", $classes) . '"><div class="' . implode(" ", $type) . '">';
  $element['#suffix'] = '</div></div>';
}

Это хорошее альтернативное решение - не добавляйте класс в div-упаковщик, просто оборачивайте div-упаковку в ваш собственный div, и вы сможете применять любые классы, какие захотите.
Феликс Ева

3

Чтобы изменить «обертку», нужно переопределить form_element. В основном все элементы формы отображаются с темой theme_form_element($element,$value);form_element (файл form.inc)

Поэтому, чтобы изменить способ визуализации элементов формы, просто скопируйте эту функцию в папку template.php и переименуйте ее в: phptemplate_form_element($element,$value)

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

  1. Скопировать theme_form_element($element,$value);из form.inc
  2. Вставьте его в (ваша тема) template.php
  3. переименуйте его в: phptemplate_form_element($element,$value)
  4. очистить весь кеш темы
  5. внесите любые изменения, которые вы хотите, и они будут использованы.

1

Вы можете использовать свойство wrapper_attributes .

$form['example'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Example'),
  '#wrapper_attributes' => ['class' => ['wrapper-class']],
];

Этот ответ мне помог, но учтите, что он относится именно к Drupal 8.x и более поздним версиям.
Уилл Мартин

0

Важно отметить, что theme_form_element будет изменять только прямой родительский div-обертку, и это не может быть целью для эффектов CSS.

[Хотя это и не программно, если кто-то просто хочет применить класс к верхней обертке поля узла (это обертка, обертка, обертка), можно предположить использование модуля «Группа полей», выбрав «Управление полями» для определенного типа контента и выберите «Добавить новую группу» в качестве простого DIV. Затем можно удалить метку и назначить нужные классы для дополнительной оболочки (но теперь у нас есть еще больше оболочек) - с неограниченным вложением.]


0

Вы могли бы использовать

'#prefix' => '<div class="new_class">', '#suffix' => '</div>'

и это обернет его


0

Сделайте атрибуты обертки настраиваемыми!

Создайте свою собственную функцию темы в вашей теме ... sites/all/themes/MY_THEME/theme/form-element.theme.inc

function my_theme_form_element($variables) {
  $element = &$variables['element'];

  $attributes = isset($element['#my_theme_wrapper_attributes']) ?
    $element['#my_theme_wrapper_attributes'] : array();

  ...

  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  ...
}

Тогда вы можете делать такие вещи, как это ...

function my_module_form_alter(&$form, &$form_state, $form_id) {
  $form['account']['mail']['#my_theme_wrapper_attributes']['class'][] = 'form-field--inline';
}

0

Бывают случаи, когда ни то, #prefix/#suffixни другое не #attributes => array('class')дает желаемых результатов. Мой частный случай - это добавление класса в div ajax-wrapper вокруг элемента managed_file. #prefix/#suffixсоздает новый контейнер и #attributes/'class'изменяет класс внутреннего элемента, а не самого внешнего.

Нормальный внешний div просто

<div id="edit-doc1--XX-ajax-wrapper">

на который сложно ориентироваться в CSS. Я могу нацелиться [id^="edit-doc"]или, [id$="-ajax-wrapper"]но оба они нацелены больше, чем просто элементы, которые я хотел

Решение, которое я придумал, состоит в том, чтобы добавить #processэлемент в форму и вручную манипулировать кодом элемента. Вот #processатрибут, добавленный к объявлению элемента формы:

$form['doc1'] = array(
  '#type' => 'managed_file',
  '#process' => array('mymodule_managed_file_process'),
);

А вот и mymodule_managed_file_process()функция:

function mymodule_managed_file_process($element, &$form_state, $form) {

  // Call the original function to perform its processing.
  $element = file_managed_file_process($element, $form_state, $form);

  // Add our own class for theming.
  $element['#prefix'] = str_replace(
    'id=',
    'class="managed-file-wrapper" id=',
    $element['#prefix']
  );

  return $element;
}

Полагаться на подстановку строк не очень удобно, поэтому используйте str_replaceна свой страх и риск. Этот код, однако, действительно изменяет внешний DIV для добавления необходимого класса:

<div class="managed-file-wrapper" id="edit-doc1--XX-ajax-wrapper">

-1
<?php
    $form['#attributes'] = array('class' => 'your-class-name');
?> 

Вы можете использовать описанный выше способ, чтобы добавить класс в элемент формы.


6
Как бы вы изменили класс div? Приведенный выше код изменяет класс тега <input />.
chrisjlee

1
Этот ответ неверен для конкретного вопроса, заданного здесь.
doublejosh
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.