Як обернути два елементи масиву візуалізації у діві?

Враховуючи цей масив, що передається:

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

Як згорнути обидва ці елементи в один DIV?

7 theming

— Джастін
джерело

Відповіді:

Ви також можете використовувати #containerелемент форми та код, подібний до наступного:

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

Елемент #container обертає своїх дочірніх елементів <div>тегом, клас CSS - той, який передається у #attributesвластивості.

Ви навіть можете використовувати контейнер для елемента "twitter-icon", але це не дає вам жодних профі, за винятком випадків, коли ви, можливо, можете додати елемент до цього, як у наступному коді:

$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
джерело

Для мене це найкраща відповідь, оскільки вона використовує фізичну структуру масиву для представлення того, що обертається, скопіює та вставить краще (переміщення елемента у відповіді @ninjascorner може порушити відкриття / закриття DIV) і не потребує додаткових тематичні функції. Дякую!

— Джастін

Це правильно: Ви можете додати ще один елемент, який відображається в тому ж контейнері, не переміщуючи #suffixвластивість з останнього елемента або #prefixвластивість з першого елемента, до нового доданого елемента. Як ви вже говорили, це менш схильне до помилок.

— kiamlaluno

Це те, що ви шукаєте?

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

Сподіваюся, що це допомагає!

— ninjascorner
джерело

@nija + 1ed, Чудова відповідь, я забув ці атрибути. Прочитайте, будь ласка, мою відповідь, чи можна цього досягти за допомогою тематичної альтернативи вашому суфіксу та префіксу.

— stefgosselin

@stefgosselin, ви маєте на увазі, що хочете створити tpl-файл, щоб надати тему?

— ninjascorner

Дякую за цю відповідь. Я знав, як це зробити на одному елементі, але мені не спадало на думку розділити суфікс і префікс. Цікаво. Мені здається безладним, але я не можу чітко сформулювати, чому так, що я справді не можу мати проблеми.

— Джастін

@ninjascorner Вибачте за затримку, я не зміг знайти нотатку з цього приводу. Також я думаю, що спосіб менш елегантний, ніж інші відповіді, застосований у темі чи модулі, який використовує гачок теми. theme_render_example_add_div Див. Api.drupal.org/api/examples/… )

— stefgosselin

Це добре лише в тому випадку, якщо ви впевнені, що обидва елементи завжди будуть надані. Легко в кінцевому підсумку з незакритим <div> при поділі подібно до цього.

— kufeiko

Ви також можете створити тему для цього.

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

І у вашому гачку теми:

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

І в тематичній функції:

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

Я використовую це в Drupal 6, я не впевнений, чи працює він також у D7, але я сподіваюся, що так

— Gnuget
джерело

Так, я розібрався в цьому способі після публікації (добре, я копіюю модуль прикладів). Це чудово працює, але я не вважаю це найкращим методом, тому що (якщо я правильно розумію), ви повинні ввести ім'я свого класу у функцію, що знижує його використання.

— Джастін