特定のラジオボタンの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
これを行う方法を理解したことがありますか?
ドミニク

答えは実際には、各ラジオボタンの周りのこのラッパー属性の変更に対する答えを探しているのと同じだったと思いますか?返信してください..感謝

-SOME_IDがラジオの「デフォルト」Drupalテーマのどこから来ているのかを明確にしてくれるのではないでしょうか。変数を平準化するために、私はセブンテーマに切り替えましたが、ラジオグループのIDのみが表示され、各アイテムのラッパーは表示されません:(
texas-bronius

回答:


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()メソッドを使用するときは、以前に設定されたクラスをオーバーライドしないように、既存のクラス配列に追加する必要があることに注意してください。


6
私は、各ラジオボタンの周りの平均ラッパーではなく、グループ
volocuga

1
これは、個々のラジオボタンではなく、ラジオのグループ全体に対して行われます。
DrCord 2015

1

オプション配列の項目に対して上記の(接頭辞/接尾辞)を実行すると、各項目の周りに必要なものがすべて得られます。

$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要素の直前の兄弟要素として、prefix + suffixに詰め込まれます。タイプミスかもしれませんが、本当に方法はありますか?
texas-bronius 2015

存在しないオプションにdivを追加するように聞こえます。オプション配列の値が互いに一致していることを確認する必要があると思います。
Strutsagget 2015

これは間違いなくtexas-broniusの言うことを実行し、ラジオボタンと同じレベルに個別の要素を追加しますが、残念ながら実用的なソリューションではありません。
DrCord 2015

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要素にクラスのみを含める場合は、https: //api.drupal.org/comment/60197#comment-60197のdrupal.orgに投稿したソリューションを実装して、#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>'
);

これにより、現在受け入れられている回答のように、ラジオグループではなく、個々のラジオボタンにラッパーとクラスが追加されます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.