it-swarm-vi.com

Thay đổi lớp trên trình bao bọc div của một phần tử biểu mẫu

Có cách nào để thêm hoặc thay đổi một lớp thành trình bao bọc biểu mẫu (div) bằng cách sử dụng biểu mẫu api không?

Hay đó chỉ là được thực hiện với chức năng chủ đề?

Nếu vậy chức năng chủ đề nào được sử dụng để thay đổi điều đó?

11
chrisjlee

Bạn có thể ghi đè theme_form_element() bình thường nếu bạn muốn thay đổi chủ đề trên toàn cầu. Nếu bạn quan tâm đến việc sửa đổi chỉ một yếu tố biểu mẫu cụ thể thì tôi biết một vài lựa chọn.

  1. Bạn có thể đăng ký một chức năng chủ đề mới cho loại phần tử biểu mẫu cụ thể mà bạn quan tâm (ví dụ: trường văn bản). Sau đó, bạn tạo chức năng chủ đề này (dựa trên bản gốc, ví dụ: theme_textfield() ) nhưng cuối cùng không gọi theme('form_element', ...) (bạn có thể xử lý cả trình bao bọc và phần tử trong một chức năng chủ đề hoặc bạn có thể tạo một chức năng chủ đề trình bao bọc riêng biệt và sử dụng chức năng đó). Cuối cùng, bạn thêm thuộc tính #theme Vào một phần tử biểu mẫu cụ thể và phần tử đó sẽ có được chủ đề tùy chỉnh của bạn.

  2. Bạn có thể tạo một tệp mẫu có tên form_element.tpl.php Chỉ có hành vi mặc định là theme_form_element() và sau đó sử dụng hook_preprocess_form_element() để thêm đề xuất mẫu. Sau đó, bạn tạo mẫu mới phù hợp với đề xuất. Bạn thường nghe mọi người đề cập rằng các mẫu chậm hơn một chút so với các chức năng và đối với một cuộc gọi chủ đề được sử dụng thường xuyên như vậy, tôi có thể tưởng tượng mọi người chùn bước khi sử dụng một mẫu. Tuy nhiên, tôi chưa bao giờ thực hiện bất kỳ phép đo nào cho việc này. Ngoài ra, bạn cần có đủ bối cảnh ở giai đoạn tiền xử lý để có thể đưa ra đề xuất.

5
Andy

Tôi biết đây là một chủ đề siêu cũ, nhưng tôi đã học cách thay đổi các thành phần của biểu mẫu và thêm các lớp. Tôi có xung quanh để làm một mô-đun tùy chỉnh:

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

Để thay đổi "trình bao bọc", bạn cần ghi đè form_element. Về cơ bản, tất cả các thành phần của biểu mẫu được hiển thị với chủ đề form_element theme_form_element($element,$value); (tệp form.inc)

Vì vậy, để thay đổi cách thức này biểu hiện các thành phần biểu mẫu của bạn, bạn chỉ cần sao chép hàm đó vào thư mục template.php và đổi tên thành: phptemplate_form_element($element,$value)

bây giờ bạn có thể thực hiện bất kỳ thay đổi nào và chúng sẽ được sử dụng thay cho chức năng ban đầu

  1. Sao chép theme_form_element($element,$value); từ form.inc
  2. Dán nó vào (chủ đề của bạn) template.php
  3. đổi tên thành: phptemplate_form_element($element,$value)
  4. xóa tất cả bộ đệm chủ đề
  5. thực hiện bất kỳ thay đổi nào bạn muốn và chúng sẽ được sử dụng.
3
Andre

Bạn có thể sử dụng Wrapper_attribut property.

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

Điều quan trọng, theme_form_element sẽ chỉ sửa đổi div trình bao bọc cha mẹ trực tiếp và điều này có thể không phải là mục tiêu dự định cho các hiệu ứng CSS.

[Mặc dù không phải là lập trình, nhưng nếu chỉ đơn giản là muốn áp dụng một lớp cho trình bao bọc trên cùng của trường nút (đó là trình bao bọc, trình bao bọc, trình bao bọc) thì tôi có thể giả sử sử dụng mô-đun "Nhóm trường" bằng cách chọn "Quản lý trường" cho một loại nội dung cụ thể và chọn "Thêm nhóm mới" làm DIV đơn giản. Sau đó, nhãn có thể được loại bỏ và các lớp mong muốn được gán cho trình bao bọc bổ sung (nhưng bây giờ chúng ta có nhiều trình bao bọc hơn nữa) - với lồng không giới hạn]

0
user24737

Làm cho các thuộc tính bao bọc có thể cấu hình!

Tạo chức năng chủ đề thành phần biểu mẫu của riêng bạn trong chủ đề của bạn ... 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";

  ...
}

Sau đó, bạn có thể làm những thứ như thế này ...

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

Có những trường hợp đến trong đó #prefix/#suffix Cũng không #attributes => array('class') cho kết quả mong muốn. Trường hợp cụ thể của tôi là thêm một lớp vào div ajax-Wrapper xung quanh phần tử Managed_file. #prefix/#suffix Tạo một thùng chứa mới và #attributes/'class' Sửa đổi lớp của một phần tử bên trong, không phải lớp ngoài cùng.

Div ngoài cùng bình thường chỉ là

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

đó là khó khăn để nhắm mục tiêu trong CSS. Tôi có thể nhắm mục tiêu [id^="edit-doc"] Hoặc [id$="-ajax-wrapper"] Nhưng cả hai mục tiêu này không chỉ là các yếu tố tôi muốn.

Giải pháp tôi đưa ra là thêm phần tử #process vào biểu mẫu và thao tác thủ công mã của phần tử. Đây là thuộc tính #process Được thêm vào khai báo của mục biểu mẫu:

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

Và đây là hàm 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;
}

Dựa vào thay thế chuỗi không phải là rất dễ mang theo, do đó, hãy tự chịu rủi ro khi sử dụng str_replace. Tuy nhiên, mã này thực sự thay đổi DIV ngoài cùng để thêm lớp cần thiết:

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

Bạn đã có thể sử dụng

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

và điều này sẽ bao bọc nó xung quanh

0
Alex