it-swarm-tr.com

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?

11
chrisjlee

Temayı global olarak değiştirmek istiyorsanız theme_form_element() normalde 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 (orijinaline bağlı olarak oluşturursunuz, örn. theme_textfield() ) ancak sonunda theme('form_element', ...) öğesini çağırmaz (her ikisini de sarıcı ve bir tema işlevindeki öğeyi veya ayrı bir sarıcı tema işlevi yapabilir ve kullanabilirsiniz). Son olarak, belirli bir form öğesine #theme Özelliği eklersiniz ve bu öğe özel temanızı alır.

  2. Varsayılan theme_form_element() davranışına sahip olan form_element.tpl.php Adlı bir şablon dosyası oluşturabilir ve ardından bir şablon önerisi eklemek için hook_preprocess_form_element() 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.

5
Andy

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

"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ı theme_form_element($element,$value); (form.inc dosyası) ile 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 gerekir: 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); öğesini form.inc'ten kopyalayın
  2. (Temanız) template.php dosyasına yapıştırın
  3. yeniden adlandırın: 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.
3
Andre

wrapper_attributes özelliğini kullanabilirsiniz.

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

Ö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]

0
user24737

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

Ne #prefix/#suffix Ne de #attributes => array('class')'in istenen sonuçları vermediği durumlar vardır. Benim özel durumum, bir yönetilen_dosya elemanının etrafındaki ajax-wrapper div öğesine bir sınıf eklemektir. #prefix/#suffix Yeni 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. [id^="edit-doc"] Veya [id$="-ajax-wrapper"] Hedefleyebilirim, ancak her ikisi de istediğim öğelerden daha fazlasını hedefliyor.

Geldiğim çözüm forma bir #process Element eklemek ve elementin kodunu elle işlemektir. Form öğesinin bildirimine eklenen #process Özelliği:

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

Ve işte mymodule_managed_file_process() işlevi:

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_replace Riski size aittir. 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">
0
Joseph Cheek

Kullanabilirsin

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

ve bu onu sarar

0
Alex