it-swarm-id.com

Ubah kelas pada pembungkus div dari elemen formulir

Apakah ada cara untuk menambah atau mengubah kelas ke pembungkus formulir (div's) menggunakan formulir api?

Atau apakah itu hanya dilakukan dengan fungsi tema?

Jika demikian, fungsi tema mana yang digunakan untuk mengubahnya?

11
chrisjlee

Anda dapat mengganti theme_form_element() secara normal jika Anda ingin mengubah tema secara global. Jika Anda tertarik untuk memodifikasi hanya satu elemen formulir tertentu maka saya menyadari beberapa pilihan.

  1. Anda bisa mendaftarkan fungsi tema baru untuk tipe elemen elemen tertentu yang Anda minati (mis. Bidang teks). Anda kemudian membuat fungsi tema ini (berdasarkan aslinya, mis. theme_textfield() ) tetapi itu tidak memanggil theme('form_element', ...) pada akhirnya (Anda bisa menangani baik pembungkus dan elemen dalam fungsi satu tema, atau Anda bisa membuat fungsi tema pembungkus terpisah dan menggunakannya). Akhirnya Anda menambahkan properti #theme Ke elemen formulir tertentu, dan elemen itu akan mendapatkan tema khusus Anda.

  2. Anda dapat membuat file template bernama form_element.tpl.php Yang hanya memiliki perilaku default theme_form_element() dan kemudian menggunakan hook_preprocess_form_element() untuk menambahkan saran template. Kemudian Anda membuat templat baru yang sesuai dengan saran. Anda sering mendengar orang-orang mengatakan bahwa templat sedikit lebih lambat daripada fungsi, dan untuk panggilan tema yang sering digunakan seperti itu, saya dapat membayangkan orang menolak keras menggunakan templat. Saya belum pernah melakukan pengukuran untuk ini sendiri. Selain itu, Anda perlu memiliki konteks yang cukup pada tahap persiapan untuk dapat membuat saran.

5
Andy

Saya tahu ini adalah utas yang sangat lama, tetapi saya telah belajar cara mengubah elemen formulir dan menambahkan kelas. Saya sempat membuat modul khusus:

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

Untuk Mengubah "wrapper" Anda perlu mengganti form_element. Pada dasarnya semua elemen formulir di-render dengan tema form_element theme_form_element($element,$value); (file form.inc)

Jadi untuk mengubah cara ini membuat elemen formulir Anda, Anda cukup menyalin fungsi itu ke folder template.php Anda dan ganti namanya menjadi: phptemplate_form_element($element,$value)

sekarang Anda dapat membuat perubahan apa pun dan itu akan digunakan alih-alih fungsi aslinya

  1. Salin theme_form_element($element,$value); dari form.inc
  2. Rekatkan ke (tema Anda) template.php
  3. ganti namanya menjadi: phptemplate_form_element($element,$value)
  4. hapus semua cache tema
  5. buat perubahan apa pun yang Anda inginkan dan akan digunakan.
3
Andre

Anda dapat menggunakan wrapper_attributes properti.

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

Yang penting, theme_form_element hanya akan memodifikasi div pembungkus induk langsung dan ini mungkin bukan target yang dimaksudkan untuk efek CSS.

[Meskipun tidak terprogram, jika seseorang hanya ingin menerapkan kelas ke pembungkus atas bidang simpul (pembungkusnya, pembungkusnya, pembungkusnya) saya dapat menggunakan modul "Kelompok bidang" dengan memilih "Kelola Bidang" untuk jenis konten tertentu dan pilih "Tambah grup baru" sebagai DIV sederhana. Kemudian label dapat dihapus dan kelas yang diinginkan ditugaskan ke pembungkus tambahan (tapi sekarang kami memiliki pembungkus lebih banyak) - dengan bersarang tanpa batas]

0
user24737

Jadikan atribut wrapper dapat dikonfigurasi!

Buat fungsi tema elemen-bentuk Anda sendiri di tema Anda ... 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";

  ...
}

Maka Anda dapat melakukan hal-hal seperti ini ...

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

Ada beberapa kasus dimana #prefix/#suffix Maupun #attributes => array('class') tidak memberikan hasil yang diinginkan. Kasus khusus saya adalah menambahkan kelas ke div ajax-wrapper di sekitar elemen managed_file. #prefix/#suffix Membuat wadah baru dan #attributes/'class' Memodifikasi kelas elemen dalam, bukan yang terluar.

Div terluar normal adalah adil

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

yang sulit ditargetkan di CSS. Saya dapat menargetkan [id^="edit-doc"] Atau [id$="-ajax-wrapper"] Tetapi kedua target ini lebih dari sekadar elemen yang saya inginkan.

Solusi yang saya buat adalah menambahkan elemen #process ke formulir dan memanipulasi kode elemen secara manual. Inilah atribut #process Yang ditambahkan ke deklarasi item formulir:

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

Dan inilah fungsi 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;
}

Mengandalkan subtitusi string tidak terlalu portabel, jadi gunakan str_replace Dengan risiko Anda sendiri. Kode ini, bagaimanapun, memang mengubah DIV terluar untuk menambahkan kelas yang diperlukan:

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

Anda bisa menggunakannya

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

dan ini akan membungkusnya

0
Alex