Come avvolgere due elementi dell'array di rendering in un div?


12

Dato questo array renderizzabile:

$output = array(
    'twitter-icon' => array(
      '#type' => 'markup',
      '#markup' => '<div class="twitter-icon"></div>'
    ),
    'twitter-link' => array(
      '#type' => 'markup',
      '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/zujava'),
    ), 
  );

Come avvolgere entrambi questi elementi in un singolo DIV?

Risposte:


29

Puoi anche utilizzare l' #containerelemento del modulo e un codice simile al seguente:

$wrapper = array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('class-name'),
  ),
);

$wrapper['twitter-icon'] => array(
  '#type' => 'markup',
  '#markup' => '<div class="twitter-icon"></div>'
);

$wrapper['twitter-link'] => array(
  '#type' => 'markup',
  '#markup' => l(t('follow us on Twitter'), 'https://twitter.com/#!/zujava'),
); 

L' elemento #container racchiude gli elementi figlio con un <div>tag, la cui classe CSS è quella passata nella #attributesproprietà.

Potresti persino usare un contenitore per l'elemento "icona twitter", ma ciò non ti dà alcun vantaggio, tranne nel caso in cui potresti eventualmente aggiungere un elemento a quello, come con il seguente codice:

$wrapper = array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('class-name'),
  ),
);

$wrapper['twitter-icon'] => array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('twitter-icon'),
  ),
);

if ($condition) {
  $wrapper['twitter-icon']['twitter-icon-text'] => array(
    '#type' => 'markup',
    '#markup' => t('Icon text'),
  );
}

$wrapper['twitter-link'] => array(
  '#type' => 'markup',
  '#markup' => l(t('follow us on Twitter'), 'https://twitter.com/#!/zujava'),
); 

Per me questa è la risposta migliore, poiché utilizza la struttura fisica dell'array per rappresentare ciò che viene avvolto, copierà e incollerà meglio (spostare un elemento nella risposta di @ninjascorner potrebbe interrompere i DIV di apertura / chiusura) e non richiede extra funzioni tematiche. Grazie!
Giustino, il

È corretto: è possibile aggiungere un altro elemento che viene visualizzato nello stesso contenitore, senza spostare la #suffixproprietà dall'ultimo elemento o la #prefixproprietà dal primo elemento al nuovo elemento aggiunto. Come hai detto, questo è meno soggetto a errori.
kiamlaluno

6

È questo quello che stai cercando?

$output = array(
    'twitter-icon' => array(
      '#type' => 'markup',
      '#markup' => '<div class="twitter-icon"></div>'
      '#prefix' => '<div class="test">',
    ),
    'twitter-link' => array(
      '#type' => 'markup',
      '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/fdgf'),
      '#suffix' => '</div>',
    ), 
);

Spero possa aiutare!


@nija + 1ed, Ottima risposta Avevo dimenticato quegli attributi. Si prega di leggere la mia risposta, questo può essere ottenuto attraverso un'alternativa basata su temi al proprio suffisso e prefisso.
Stefgosselin,

@stefgosselin, vuoi dire che vuoi creare un file tpl per tema?
ninjascorner,

Grazie per questa risposta Sapevo come farlo su un elemento, ma non mi è venuto in mente di dividere il suffisso e il prefisso. Interessante. Mi sembra disordinato, ma non riesco a capire perché, quindi non posso davvero avere un problema.
Giustino, il

@ninjascorner Scusate il ritardo, non sono riuscito a trovare la nota che avevo su questo argomento. C'è anche un modo per pensare meno elegante di altre risposte, utilizzabile in tema o modulo che utilizza l'hook a tema theme_render_example_add_div Vedi api.drupal.org/api/examples/… )
stefgosselin

Questo è utile solo se sei sicuro che entrambi gli elementi verranno sempre rappresentati. È facile finire con <div> non chiuso quando si divide in questo modo.
Kufeiko,

2

Puoi anche creare un tema per questo.

$form['twitter']['#theme'] = 'my_twitter_theme';

$form['twitter']['icon'] = array(
'twitter-icon' => array(
  '#type' => 'markup',
  '#markup' => '<div class="twitter-icon"></div>'
);

$form['twitter']['link'] = array(
  '#type' => 'markup',
  '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/zujava'),
);

E nel tuo gancio tema:

function my_hook_theme(){
  return array(
    'my_twitter_theme' => array('form' => NULL)
  );
} 

E nella funzione tema:

function theme_my_twitter_theme($form){
  $output = "";

  $output .= "<div class=\"twitter\">";
  $output .= drupal_render($form['icon']);
  $output .= drupal_render($form['link']);
  $output .= "</div>";    

  $output .= drupal_render($form);
  return $output;
}

Lo uso in Drupal 6, non sono sicuro che funzioni anche in D7, ma lo spero


Sì, ho capito questo metodo dopo la pubblicazione (beh, copio il modulo degli esempi). Funziona benissimo, ma non lo considero il metodo migliore perché (se ho capito bene), devi inserire il nome della tua classe nella funzione, ne riduce la riusabilità.
Giustino, il
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.