Jak owinąć dwa elementy tablicy renderowania w div?

12

Biorąc pod uwagę tę tablicę do renderowania:

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

Jak owinąć oba te elementy w jednym DIV?

Justin
źródło

Odpowiedzi:

29

Możesz także użyć #containerelementu formularza i kodu podobnego do następującego:

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

Element #container otacza swoje elementy potomne <div>znacznikiem, którego klasa CSS jest klasą przekazaną we #attributeswłaściwości.

Możesz nawet użyć kontenera dla elementu „twitter-icon”, ale to nie daje żadnych korzyści, z wyjątkiem przypadku, gdy możesz dodać element do tego, jak w przypadku następującego kodu:

$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'),
); 
kiamlaluno
źródło
Dla mnie jest to najlepsza odpowiedź, ponieważ wykorzystuje ona fizyczną strukturę tablic do reprezentowania tego, co jest pakowane, będzie lepiej kopiować i wklejać (przesunięcie elementu w odpowiedzi @ ninjascorner może uszkodzić otwierające / zamykające DIV) i nie wymaga dodatkowych funkcje tematyczne. Dzięki!
Justin
To prawda: możesz dodać kolejny element, który jest renderowany w tym samym kontenerze, bez przenoszenia #suffixwłaściwości z ostatniego elementu lub #prefixwłaściwości z pierwszego elementu do nowego dodanego elementu. Jak powiedziałeś, jest to mniej podatne na błędy.
kiamlaluno
6

Czy tego szukasz?

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

Mam nadzieję, że to pomaga!

ninjascorner
źródło
@nija + 1ed, Świetna odpowiedź Zapomniałem tych atrybutów. Proszę przeczytać moją odpowiedź, czy można to osiągnąć poprzez tematyczną alternatywę dla sufiksu i prefiksu.
stefgosselin,
@stefgosselin, masz na myśli, że chcesz utworzyć plik tpl, aby go motywować?
ninjascorner,
Dziękuję za tę odpowiedź. Wiedziałem, jak to zrobić na jednym elemencie, ale nie przyszło mi do głowy, aby rozdzielić sufiks i prefiks. Ciekawy. Jest to dla mnie bałagan, ale nie potrafię wyjaśnić, dlaczego, więc naprawdę nie mogę mieć problemu.
Justin,
@ninjascorner Przepraszam za opóźnienie, nie mogłem znaleźć notatki na ten temat. Sądzę też, że istnieje sposób mniej elegancki niż inne odpowiedzi, nadający się do użycia w temacie lub module, który używa haka motywu theme_render_example_add_div Patrz api.drupal.org/api/examples/… )
stefgosselin
Jest to dobre tylko wtedy, gdy masz pewność, że oba elementy będą zawsze renderowane. Łatwo jest skończyć z niezamkniętym <div> podczas takiego podziału.
kufeiko
2

Możesz także stworzyć do tego motyw.

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

I w haku motywu:

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

A w funkcji motywu:

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

Używam tego w Drupal 6, nie jestem pewien, czy działa również w D7, ale mam nadzieję, że tak

Gnuget
źródło
Tak, wymyśliłem tę metodę po opublikowaniu (cóż, kopiuję moduł przykładów). Działa świetnie, ale nie uważam go za najlepszą metodę, ponieważ (jeśli dobrze rozumiem), musisz umieścić nazwę swojej klasy w funkcji, zmniejsza to możliwość ponownego użycia.
Justin,