aggiungere / cambiare wrapper div attorno al pulsante di opzione specifico?


7

Per impostazione predefinita, il markup HTML per i pulsanti di opzione è simile a (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>

Ho bisogno di cambiare / aggiungere alcune classi CSS nel esterno <div>O aggiungere un wrapper <div>. Come lo faccio?


1
Hai mai capito come farlo?
Dominic,

hai trovato la risposta effettivamente la stessa ricerca di risposta per questo cambiamento di attributi wrapper attorno a ciascun pulsante di

Mi chiedo se potresti chiarire da dove proviene -SOME_ID nel tema Drupal delle radio "di default". Per livellare le variabili, sono passato al tema Seven e vedo ancora solo l'ID del gruppo radio, non un wrapper per ogni elemento :(
texas-bronius,

Risposte:


9

Se stai definendo il modulo tu stesso puoi avvolgere un elemento con HTML usando le proprietà #prefixe #suffix:

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

Se si desidera aggiungere una classe al wrapper esistente, è possibile farlo utilizzando la #attributesproprietà:

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

Se non stai definendo il modulo da solo, puoi comunque utilizzare la stessa logica e implementare a hook_form_alter()per modificare il modulo esistente:

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

Si noti che quando si utilizza il hook_form_alter()metodo è necessario aggiungere all'array di classi esistente in modo da non sovrascrivere le classi impostate in precedenza.


6
Intendo un involucro attorno a ciascun pulsante di
opzione

1
Questo lo fa per l'intero gruppo di radio, non per i singoli pulsanti di opzione.
DrCord,

1

Puoi fare quanto sopra (prefisso / suffisso) sugli elementi nell'array delle opzioni, quindi ottenere tutto ciò che desideri intorno a ciascun elemento.

$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
Voglio crederci, ma questo non lo sta facendo per me (D7). Invece, inserisce semplicemente il prefisso + suffisso come elemento fratello che precede immediatamente gli elementi delle opzioni div avvolti individualmente. Potrebbe essere un errore di battitura e c'è davvero un modo?
texas-bronius,

Sembra proprio che tu stia aggiungendo il div a nessuna opzione esistente. Pensa che devi assicurarti che i valori dell'array delle opzioni corrispondano l'un l'altro.
Strutsagget,

Questo fa sicuramente quello che dice texas-bronius, aggiunge un elemento separato allo stesso livello dei pulsanti di opzione, non una soluzione funzionante, purtroppo.
DrCord,

1

Sono stato in grado di raggiungere questo obiettivo dopo molto lavoro e provando ogni metodo pubblicato utilizzando un suggerimento intelligente che ho trovato in profondità in Internet su un altro sito: http://e9p.net/altering-individual-radio-or-checkbox-items-drupal- 7-fapi , da usare #after_buildper essere in grado di modificare le singole radio dell'elemento di forma una volta che sono un array di rendering drupal.

Volevo che ogni radio fosse avvolta in un contenitore con una classe, quindi ho usato #prefixe #suffixper farlo:

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

esempio usare:

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

Tuttavia, se vuoi solo che l' inputelemento abbia la classe, dovrai implementare la soluzione che ho pubblicato su drupal.org su https://api.drupal.org/comment/60197#comment-60197 per consentire l'utilizzo di #options_attributes correttamente per le singole opzioni. Ripubblicazione del codice qui:

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

esempio usare:

$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

L'unico modo in cui sono stato in grado di raggiungere questo obiettivo è la creazione di un elemento modulo diverso per ciascuna radio, l'associazione manuale dei nomi utilizzando #nome e l'impostazione manuale di un valore mediante #attributi. (#value non funziona per qualche motivo.)

Per esempio:

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

Ciò aggiungerà un wrapper e una classe ai singoli pulsanti di opzione anziché al gruppo di radio come fa la risposta attualmente accettata.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.