Form öğesinin div sarıcısında sınıfı değiştirme

Api formunu kullanarak bir form sarmalayıcısına (div) bir sınıf eklemenin veya değiştirmenin bir yolu var mı?

Yoksa bu sadece tema fonksiyonu ile mi yapıldı?

Eğer öyleyse bunu değiştirmek için hangi tema işlevi kullanılır?

theme_form_element()Temayı global olarak değiştirmek istiyorsanız normal olarak geçersiz kılabilirsiniz . Yalnızca belirli bir form öğesini değiştirmekle ilgileniyorsanız, birkaç seçeneğin farkındayım.

1. İlgilendiğiniz belirli form öğesi türü için yeni bir tema işlevi kaydedebilirsiniz (örn. Metin alanı). Daha sonra bu tema işlevini oluşturursunuz (orijinaline göre, örn. theme_textfield()) Ancak theme('form_element', ...)sonunda çağrılamaz (bir tema işlevindeki hem sarıcıyı hem de öğeyi işleyebilir veya ayrı bir sarıcı tema işlevi yapabilirsiniz. ve kullanın). Son olarak #theme, belirli bir form öğesine bir özellik eklersiniz ve o öğe özel temanızı alır.

2. Yalnızca form_element.tpl.phpvarsayılan davranışına sahip adlı bir şablon dosyası oluşturabilir theme_form_element()ve sonra hook_preprocess_form_element()bir şablon önerisi eklemek için kullanabilirsiniz . Ardından öneriyle eşleşen yeni şablonu oluşturursunuz. İnsanların şablonların işlevlerden biraz daha yavaş olduğunu belirten insanları duyarsınız ve bu kadar sık ​​kullanılan bir tema çağrısı için insanların bir şablon kullanırken balkinglerini hayal edebilirim. Ancak bunun için daha önce hiç ölçüm yapmadım. Ayrıca, öneri aşamasında öneri yapabilmek için yeterli içeriğe sahip olmanız gerekir.

Bunun çok eski bir iş parçacığı olduğunu biliyorum, ama form öğelerini değiştirmeyi ve sınıf eklemeyi öğreniyordum. Özel bir modül yapmak için dolaştım:

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>';
}

"Sarıcı" yı değiştirmek için form_element'i geçersiz kılmanız gerekir. Temel olarak tüm form öğeleri form_element temasıyla theme_form_element($element,$value);(form.inc dosyası) oluşturulur

Bunun, form öğelerinizi oluşturma biçimini değiştirmek için bu işlevi template.php klasörünüze kopyalamanız ve yeniden adlandırmanız yeterlidir: phptemplate_form_element($element,$value)

şimdi herhangi bir değişiklik yapabilirsiniz ve bunlar orijinal işlev yerine kullanılacaktır

1. theme_form_element($element,$value);Form.inc dosyasından kopyala
2. (Temanız) template.php dosyasına yapıştırın
3. yeniden adlandır: phptemplate_form_element($element,$value)
4. tüm tema önbelleğini temizle
5. istediğiniz değişiklikleri yapın ve bunlar kullanılacaktır.

Wrapper_attributes özelliğini kullanabilirsiniz .

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

Önemli olarak, theme_form_element yalnızca doğrudan ana sarmalayıcı div'ı değiştirir ve bu CSS efektleri için amaçlanmamış olabilir.

[Programlı olmasa da, sadece bir düğüm alanının üst sarmalayıcısına (sarmalayıcı, sarmalayıcı, sarmalayıcı) bir sınıf uygulamak istiyorsa, belirli bir içerik türü için "Alanları Yönet" i seçerek "Alan grubu" modülünü kullanabilirim ve basit bir DIV olarak "Yeni grup ekle" yi seçin. Daha sonra etiket çıkarılabilir ve ek paketleyiciye istenen sınıflar atanabilir (ancak şimdi daha fazla paketleyicimiz var) - sınırsız yuvalama ile]

Kullanabilirsin

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

ve bu onu sarar

Sarıcı niteliklerini yapılandırılabilir hale getirin!

Temanızda kendi form öğesi tema işlevinizi oluşturun ... 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";

  ...
}

Sonra böyle şeyler yapabilirsiniz ...

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

İstenilen sonuçları vermeyen #prefix/#suffixveya #attributes => array('class')vermeyen durumlar da vardır . Benim özel durumum, bir yönetilen_dosya elemanının etrafındaki ajax-wrapper div öğesine bir sınıf eklemektir. #prefix/#suffixyeni bir kap oluşturur ve #attributes/'class'en dışta değil, bir iç öğenin sınıfını değiştirir.

En dıştaki div sadece

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

CSS'de hedeflenmesi zor. Hedefleyebileceğim [id^="edit-doc"]veya [id$="-ajax-wrapper"]her ikisini birden istediğim unsurlardan daha fazla hedefleyebilirim.

Geldiğim çözüm forma bir #processeleman eklemek ve elemanın kodunu manuel olarak değiştirmek. İşte #processformu öğesinin beyanı eklendi özellik:

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

Ve işte mymodule_managed_file_process()fonksiyon:

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;
}

Dize değiştirmeye güvenmek çok taşınabilir değildir, bu nedenle str_replacekendi sorumluluğunuzdadır kullanın . Bununla birlikte, bu kod gerçekten gerekli sınıfı eklemek için en dıştaki DIV'yi değiştirir:

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

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

Form öğesine bir sınıf eklemek için yukarıdaki yolu kullanabilirsiniz.