เปลี่ยนคลาสบน div wrapper ขององค์ประกอบแบบฟอร์ม

มีวิธีการเพิ่มหรือเปลี่ยนคลาสให้เป็น wrapper แบบฟอร์ม (the div's) โดยใช้ form api หรือไม่?

หรือว่าเพิ่งจะทำกับฟังก์ชั่นชุดรูปแบบ?

ถ้าเช่นนั้นฟังก์ชั่นชุดรูปแบบที่ใช้ในการเปลี่ยนแปลงนั้น

คุณสามารถแทนที่ได้theme_form_element()ตามปกติหากคุณต้องการเปลี่ยนชุดรูปแบบทั่วโลก หากคุณสนใจที่จะแก้ไของค์ประกอบของแบบฟอร์มที่เฉพาะเจาะจงเพียงอย่างเดียวฉันก็ตระหนักถึงตัวเลือกสองสามอย่าง

1. คุณสามารถลงทะเบียนฟังก์ชั่นชุดรูปแบบใหม่สำหรับองค์ประกอบรูปแบบเฉพาะที่คุณสนใจ (เช่นฟิลด์ข้อความ) จากนั้นคุณสร้างฟังก์ชั่นชุดรูปแบบนี้ (ตามต้นฉบับเช่น. theme_textfield()) แต่นั่นไม่ได้เรียกtheme('form_element', ...)ที่ท้าย (คุณสามารถจัดการทั้ง wrapper และองค์ประกอบในฟังก์ชั่นชุดรูปแบบหนึ่งหรือคุณสามารถสร้างฟังก์ชั่นชุดรูปแบบ wrapper แยก และใช้สิ่งนั้น) ในที่สุดคุณก็เพิ่ม#themeคุณสมบัติให้กับองค์ประกอบของรูปแบบเฉพาะและองค์ประกอบนั้นจะได้รับชุดรูปแบบของคุณเอง

2. คุณสามารถสร้างไฟล์เทมเพลตที่เรียกว่าform_element.tpl.phpเพิ่งมีพฤติกรรมเริ่มต้นtheme_form_element()แล้วใช้hook_preprocess_form_element()เพื่อเพิ่มข้อเสนอแนะแม่แบบ จากนั้นคุณสร้างเทมเพลตใหม่ที่ตรงกับคำแนะนำ คุณมักจะได้ยินคนพูดถึงว่าแม่แบบนั้นช้ากว่าฟังก์ชั่นเล็กน้อยและสำหรับการโทรธีมที่ใช้บ่อยเช่นนี้ฉันสามารถจินตนาการได้ว่าผู้คนกำลังใช้งานเทมเพลตอยู่ อย่างไรก็ตามฉันไม่เคยทำการวัดใด ๆ สำหรับตัวฉันเอง นอกจากนี้คุณต้องมีบริบทเพียงพอในขั้นตอนการเตรียมการก่อนจึงจะสามารถให้คำแนะนำได้

ฉันรู้ว่านี่เป็นเธรดเก่าสุด แต่ฉันได้เรียนรู้วิธีเปลี่ยนองค์ประกอบของฟอร์มและเพิ่มคลาส ฉันได้ทำโมดูลที่กำหนดเอง:

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

ในการเปลี่ยน "wrapper" คุณจะต้องแทนที่ 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. ทำการเปลี่ยนแปลงใด ๆ ที่คุณต้องการและพวกเขาจะถูกนำมาใช้

คุณสามารถใช้คุณสมบัติwrapper_attributes

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

ที่สำคัญ theme_form_element จะแก้ไข div parent wrapper โดยตรงเท่านั้นและนี่อาจไม่ใช่เป้าหมายที่กำหนดไว้สำหรับเอฟเฟกต์ CSS

[แม้ว่าจะไม่ใช่การเขียนโปรแกรมหากต้องการเพียงแค่นำคลาสไปใช้กับ wrapper บนสุดของโหนดฟิลด์ (เป็น wrapper's, wrapper's, wrapper) เราสามารถสมมติว่าใช้โมดูล "Field group" โดยเลือก "Manage Fields" สำหรับประเภทเนื้อหาเฉพาะและ เลือก "เพิ่มกลุ่มใหม่" เป็น DIV ง่าย ๆ จากนั้นสามารถลบป้ายกำกับและคลาสที่ต้องการให้กับ wrapper เพิ่มเติม (แต่ตอนนี้เรามี wrapper มากขึ้น) - ด้วยการซ้อนแบบไม่ จำกัด ]

คุณสามารถใช้

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

และสิ่งนี้จะล้อมรอบ

กำหนดคุณลักษณะของ wrapper ได้!

สร้างฟังก์ชั่นชุดรูปแบบองค์ประกอบของคุณเองในชุดรูปแบบของคุณ ... 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';
}

มีมาในกรณีที่ค่า#prefix/#suffixมิได้#attributes => array('class')ให้ผลลัพธ์ที่ต้องการ กรณีของฉันคือการเพิ่มคลาสให้กับ 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">

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

คุณสามารถใช้วิธีการด้านบนเพื่อเพิ่มคลาสในองค์ประกอบแบบฟอร์ม