tambah / ubah pembungkus div di sekitar tombol radio tertentu?

7

Secara default, markup HTML untuk tombol radio terlihat seperti (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>

Saya perlu mengubah / menambahkan beberapa kelas css di luar <div>ATAU menambahkan pembungkus <div>. Bagaimana aku melakukan itu?

volocuga
sumber
1
Apakah Anda pernah memikirkan cara melakukan ini?
Dominic
apakah Anda menemukan jawaban yang sebenarnya sama dengan mencari jawaban untuk atribut pembungkus yang berubah ini di sekitar setiap tombol radio .. tolong balas .. terima kasih
Saya ingin tahu apakah Anda dapat mengklarifikasi dari mana -SOME_ID berasal dari "Drupal" radio Anda. Untuk tingkat variabel, saya beralih ke tema Tujuh dan masih melihat hanya ID dari kelompok radio, bukan pembungkus pada setiap item :(
texas-bronius

Jawaban:

9

Jika Anda menentukan sendiri formulirnya, Anda bisa membungkus sebuah elemen dengan HTML menggunakan #prefixdan #suffixproperti:

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

Jika Anda ingin menambahkan kelas ke pembungkus yang ada, Anda dapat melakukannya menggunakan #attributesproperti:

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

Jika Anda tidak mendefinisikan formulir sendiri maka Anda masih dapat menggunakan logika yang sama dan menerapkannya hook_form_alter()untuk mengubah formulir yang ada:

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

Perhatikan bahwa saat menggunakan hook_form_alter()metode ini Anda harus menambahkan ke array kelas yang ada agar tidak menimpa kelas yang telah ditetapkan sebelumnya.

Clive
sumber
6
Maksud saya pembungkus di sekitar setiap tombol radio, bukan grup
volocuga
1
Ini melakukannya untuk seluruh grup radio, bukan tombol radio individual.
DrCord
1

Anda dapat melakukan hal di atas (awalan / akhiran) pada item dalam array opsi kemudian Anda mendapatkan apa pun yang Anda inginkan di sekitar setiap item.

$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>'
);
Strutsagget
sumber
1
Saya ingin percaya, tetapi ini tidak melakukannya untuk saya (D7). Alih-alih, ia hanya memasukkan awalan + akhiran sebagai elemen saudara segera sebelum elemen opsi yang dibungkus secara individual. Mungkinkah ini salah ketik, dan memang ada caranya?
texas-bronius
Kedengarannya seperti Anda menambahkan div ke opsi yang tidak ada. Berpikir Anda harus memastikan nilai array opsi cocok satu sama lain.
Strutsagget
Ini benar-benar melakukan apa yang dikatakan texas-bronius, menambahkan elemen terpisah pada tingkat yang sama dengan tombol radio, bukan solusi yang berfungsi, sayangnya.
DrCord
1

Saya dapat mencapai ini setelah banyak bekerja dan mencoba setiap metode yang diposting menggunakan tip cerdas yang saya temukan jauh di internet di situs lain: http://e9p.net/altering-individual-radio-or-checkbox-items-drupal- 7-fapi , untuk digunakan #after_builduntuk dapat mengubah elemen bentuk radio individu setelah mereka adalah array render drupal.

Saya ingin setiap radio terbungkus wadah dengan kelas, jadi saya menggunakan #prefixdan #suffixmelakukan itu:

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

contoh gunakan:

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

Namun jika Anda hanya ingin inputelemen memiliki kelas Anda perlu mengimplementasikan solusi yang saya posting di drupal.org di https://api.drupal.org/comment/60197#comment-60197 untuk memungkinkan #options_attributes digunakan dengan benar untuk opsi individual. Posting ulang kode di sini:

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

contoh gunakan:

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

Satu-satunya cara saya bisa mencapai ini adalah dengan membuat elemen bentuk yang berbeda untuk setiap radio, memasangkan secara manual nama-nama menggunakan #name dan secara manual mengatur nilai menggunakan #attributes. (#value tidak berfungsi karena beberapa alasan.)

Sebagai contoh:

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

Ini akan menambahkan pembungkus dan kelas ke masing-masing tombol radio daripada grup radio seperti jawaban yang diterima saat ini.

Membayangkan
sumber