在特定单选按钮周围添加/更改div包装器?


7

默认情况下,单选按钮的HTML标记看起来像(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>

我需要在外部更改/添加一些CSS类,<div>或者添加包装器<div>。我怎么做?


1
您是否曾经知道过该怎么做?
多米尼克

您是否发现答案实际上与针对每个单选按钮周围不断变化的包装器属性寻找答案的方法相同。.请答复..谢谢

我想知道您是否可以在无线电的“默认” Drupal主题中澄清-SOME_ID的来源。为了调整变量,我切换到七个主题,但仍然只看到radios组的ID,而不是每个项目的包装器:(
texas-bronius 2013年

Answers:


9

如果您自己定义表单,则可以使用#prefix#suffix属性使用HTML包装元素:

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

如果要将类添加到现有包装器,可以使用#attributes属性来执行以下操作:

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

如果您自己没有定义表单,则仍然可以使用相同的逻辑并实现hook_form_alter()来更改现有表单:

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

请注意,使用该hook_form_alter()方法时,您应该追加到现有的classes数组中,以免覆盖以前设置的任何类。


6
我的意思是包装每个单选按钮,而不是分组
volocuga 2012年

1
这样做是针对整个无线电组而不是单个无线电按钮。
DrCord

1

您可以对options数组中的项目执行以上操作(前缀/后缀),然后在每个项目周围获得所需的任何内容。

$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
我想相信,但这不是为我做的(D7)。取而代之的是,它只是将前缀+后缀作为同级元素填充在紧靠各个div包裹的options元素之前。可能是拼写错误,真的有办法吗?
texas-bronius

听起来就像您将div添加到不存在的选项中一样。认为您必须确保选项数组值彼此匹配。
Strutsagget 2015年

可悲的是,这确实符合texas-bronius所说的,并在与单选按钮相同的级别上添加了一个单独的元素,而不是有效的解决方案。
DrCord

1

经过大量的工作,并使用我在另一个站点的互联网上找到的智能技巧,尝试了每种发布的方法,我能够实现这一目标:http : //e9p.net/altering-individual-radio-or-checkbox-items-drupal- 7-fapi,用于#after_build在单个无线电是drupal渲染数组时能够更改表单元素。

我希望将每个无线电包裹在一个带有类的容器中,所以我使用#prefix#suffix做到了:

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

示例使用:

$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'
        )
);

但是,如果只希望input元素具有类,则需要实现我在drupal.org上发布的解决方案,网址https://api.drupal.org/comment/60197#comment-60197,以允许使用#options_attributes正确的个别选项。在此处重新发布代码:

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

示例使用:

$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

我能够实现这一目标的唯一方法是为每个无线电创建一个不同的表单元素,使用#name手动将名称配对,并使用#attributes手动设置值。(由于某些原因,#value无效。)

例如:

$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>'
);

这会将包装器和类添加到单个单选按钮,而不是像当前接受的答案那样添加单选组。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.