thêm / thay đổi trình bao div xung quanh nút radio cụ thể?


7

Theo mặc định, đánh dấu HTML cho các nút radio trông giống như (Drupal 7):

<div class="form-item form-type-radio form-item-SOME_ID">
  <input id="edit-SOME_ID" class="form-radio" type="radio" value="SOME_VALUE" name="SOME_NAME" /> 
  <label class="option" for="edit-bla-bla">MY LABEL</label>
</div>

Tôi cần thay đổi / thêm một số lớp css ở bên ngoài <div>HOẶC thêm một trình bao bọc <div>. Làm thế nào để làm điều đó?


1
Bạn đã bao giờ tìm ra làm thế nào để làm điều này?
Đaminh

bạn có tìm thấy câu trả lời thực sự giống như tìm kiếm câu trả lời cho thuộc tính trình bao bọc thay đổi này xung quanh mỗi nút radio không .. vui lòng trả lời .. cảm ơn

Tôi tự hỏi nếu bạn có thể làm rõ nơi -SOME_ID đến từ "theo mặc định" theo chủ đề của radio. Để san bằng các biến, tôi chuyển sang chủ đề Bảy và vẫn chỉ thấy ID của nhóm radio, không phải là trình bao bọc cho mỗi mục :(
texas-bronius

Câu trả lời:


9

Nếu bạn tự xác định biểu mẫu, bạn có thể bọc một phần tử bằng HTML bằng cách sử dụng #prefix#suffixcác thuộc tính:

$form['radios'] = array(
  '#type' => 'radios',
  '#title' => 'Options',
  '#options' => drupal_map_assoc(1, 2, 3),
  '#prefix' => '<div class="some-class">',
  '#suffix' => '</div>'
);

Nếu bạn muốn thêm một lớp vào trình bao bọc hiện có, bạn có thể làm như vậy bằng cách sử dụng thuộc #attributestính:

$form['radios'] = array(
  '#type' => 'radios',
  '#title' => 'Options',
  '#options' => drupal_map_assoc(1, 2, 3),
  '#attributes' => array(
    'class' => array('some-class')
  )
);

Nếu bạn không tự xác định biểu mẫu thì bạn vẫn có thể sử dụng cùng logic và triển khai a hook_form_alter()để thay đổi biểu mẫu hiện có:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'some_form_id') {
    $form['some_element']['#attributes']['class'][] = 'some-class';
  }
}

Lưu ý rằng khi sử dụng hook_form_alter()phương thức, bạn nên nối vào mảng lớp hiện có để không ghi đè bất kỳ lớp nào đã được đặt trước đó.


6
Ý tôi là bao bọc xung quanh mỗi nút radio, không phải nhóm
volocuga

1
Điều này thực hiện nó cho toàn bộ nhóm radio chứ không phải các nút radio riêng lẻ.
DrCord

1

Bạn có thể làm như trên (tiền tố / hậu tố) trên các mục trong mảng tùy chọn sau đó bạn nhận được bất cứ điều gì bạn muốn xung quanh mỗi mục.

$form['view_mode'] = array(
    '#type' => 'radios',
    '#default_value' => isset($_GET['view'])?$_GET['view']:1,
    '#options' => array(
          1 => '1',
          2 => '2',
          3 => '3',
    ),
  ),
);
$form['view_mode'][1] = array(
    '#prefix' => '<div class="first-item container">',
    '#suffix' => '</div>'
);

1
Tôi muốn tin, nhưng điều này không làm cho tôi (D7). Thay vào đó, nó chỉ nhồi vào tiền tố + hậu tố như là một phần tử anh chị ngay trước các phần tử tùy chọn được bao bọc bởi div riêng lẻ. Nó có thể là một lỗi đánh máy, và thực sự có một cách?
texas-bronius

Âm thanh giống như bạn đang thêm div vào một tùy chọn không có sẵn. Hãy nghĩ rằng bạn phải đảm bảo các giá trị mảng tùy chọn khớp với nhau.
Strutsagget

Điều này chắc chắn làm những gì texas-bronius nói, thêm một yếu tố riêng biệt ở cùng cấp độ với các nút radio, không phải là một giải pháp làm việc, đáng buồn.
DrCord

1

Tôi đã có thể đạt được điều này sau nhiều công việc và thử mọi phương pháp được đăng bằng một mẹo thông minh mà tôi tìm thấy sâu trên internet trên một trang web khác: http://e9p.net/altering-inderson-radio-or-checkbox-items-drupal- 7-fapi , để sử dụng #after_buildđể có thể thay đổi các bộ đàm riêng lẻ của phần tử hình thức một khi chúng là một mảng kết xuất drupal.

Tôi muốn mỗi đài được bọc trong một thùng chứa với một lớp, vì vậy tôi đã sử dụng #prefix#suffixthực hiện điều đó:

function _MYMODULE_options_after_build(&$element, &$form_state){
    // Each renderable radio element.
    foreach (element_children($element) as $key) {
        $element[$key]['#prefix'] = '<div class="class1 class2">';
        $element[$key]['#suffix'] = '</div>';
    }
    // Always return the element to render in after_build callbacks.
    return $element;
}

ví dụ sử dụng:

$form['style'] = array(
        '#type' => 'radios',
        '#title' => t('Select your style option'),
        '#options' => $style_options,
        '#default_value' => NULL,
        '#required' => TRUE,
        '#after_build' => array(
            '_MYMODULE_options_after_build'
        )
);

Tuy nhiên, nếu bạn chỉ muốn inputphần tử có lớp, bạn sẽ cần triển khai giải pháp tôi đã đăng trên drupal.org tại https://api.drupal.org/comment/60197#comment-60197 để cho phép #options_attribut được sử dụng chính xác cho các lựa chọn cá nhân. Đăng lại mã tại đây:

function MYMODULE_element_info_alter(&$info) {
    // You might want more advanced logic here, to replace instead of override altogether,
    // in case other modules have already altered the core info.
    $info['radios']['#process'] = array('safetycal_request_a_quote_process_radios');
}

function MYMODULE_process_radios($element) {
    // for some reason when I take over processing the radios the structure
    // is slightly different than with form_process_radios and it needs to be fixed
    if(isset($element['element'])){
        $element = $element['element'];
    }
    if (count($element ['#options']) > 0) {
        $weight = 0;
        foreach ($element ['#options'] as $key => $choice) {
            // Maintain order of options as defined in #options, in case the element
            // defines custom option sub-elements, but does not define all option
            // sub-elements.
            $weight += 0.001;

            $element += array($key => array());
            // Generate the parents as the autogenerator does, so we will have a
            // unique id for each radio button.
            $parents_for_id = array_merge($element ['#parents'], array($key));
            $element [$key] += array(
                '#type' => 'radio',
                '#title' => $choice,
                // The key is sanitized in drupal_attributes() during output from the
                // theme function.
                '#return_value' => $key,
                // Use default or FALSE. A value of FALSE means that the radio button is
                // not 'checked'.
                '#default_value' => isset($element ['#default_value']) ? $element ['#default_value'] : FALSE,
                // changed below line to use the #options_attributes array
                '#attributes' => $element['#option_attributes'][$key],
                '#parents' => $element ['#parents'],
                '#id' => drupal_html_id('edit-' . implode('-', $parents_for_id)),
                '#ajax' => isset($element ['#ajax']) ? $element ['#ajax'] : NULL,
                '#weight' => $weight,
            );
        }
    }
    return $element;
}

ví dụ sử dụng:

$style_options = array(
    'red' => 'Red',
    'green' => 'Green',
    'yellow' => 'Yellow'
);
$style_option_attributes = array(
    'red' => array(
        'class' => array(
                'red-class'
            )
    ),
    'green' => array(
        'class' => array(
                'green-class'
            )
    ),
    'yellow' => array(
        'class' => array(
                'yellow-class'
            )
    )
);
$form['style'] = array(
    '#type' => 'radios',
    '#title' => t('Select your style option'),
    '#options' => $style_options,
    '#option_attributes' => $style_option_attributes,
    '#default_value' => NULL,
    '#required' => TRUE,
    '#attributes' => array(
        'class' => array(
            'radio-element-class'
        )
    )
 );

0

Cách duy nhất tôi có thể đạt được điều này là tạo một thành phần biểu mẫu khác nhau cho mỗi đài, ghép cặp tên bằng cách sử dụng #name và đặt giá trị theo cách thủ công bằng cách sử dụng #attribut. (#value không hoạt động vì một số lý do.)

Ví dụ:

$form['apple'] = array(
  '#type' => 'radio', // Notice no s here; 'radio' not 'radios'
  '#name' => 'fruit', // This will ensure the radios are in the same group
  '#attributes' => array(
       'value' => 'apple', // I know this is bad but it's the only way I could get setting a value to work
       'class' => 'class_here' // This will add class_here to the default wrapper
   ),
  '#prefix' => '<div class="some-class">', // This will prefix the individual radio, wrapper and label
  '#suffix' => '</div>' // This will suffix the individual radio, wrapper and label
);

// Then just repeat with different values

$form['orange'] = array(
  '#type' => 'radio',
  '#name' => 'fruit', // Same name
  '#attributes' => array(
       'value' => 'orange', // Different value
       'class' => 'class_here'
   ),
  '#prefix' => '<div class="some-class">',
  '#suffix' => '</div>'
);

$form['banana'] = array(
  '#type' => 'radio',
  '#name' => 'fruit', // Same name
  '#attributes' => array(
       'value' => 'banana', // Different value
       'class' => 'class_here'
   ),
  '#prefix' => '<div class="some-class">',
  '#suffix' => '</div>'
);

Điều này sẽ thêm một trình bao bọc và lớp cho các nút radio riêng lẻ thay vì nhóm radio như câu trả lời hiện được chấp nhận.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.