Задача

На Drupal7 часть полей материалов (ноды) определенного типа вывести во вкладках для экономии места на экране.

Выбор инструмента

Для Drupal7 существует ряд модулей, предназначенных для изменения способа отображения содержимого ноды на экране. Например, модули Fieldgroup, Quick Tabs, Panels, Arrange Fields, Content Templates и т.д. Для организации вывода информации в табах логично было бы использовать модуль Quick Tabs, а для размещения элементов на странице (включая сам блок вкладок) - модуль Panels. Модуль Fieldgroup также содержит в настройках упоминание о табах, как горизонтальных, так и вертикальных. Но, к сожалению, ни модуль Fieldgroup, ни связка Panels + Quick Tabs не дают никакого результата и на Drupal7 вывести значения полей в табах с их помощью не удается.

Реализация

Для организации закладок просто используем jQuery. В Drupal7 отдельно подключать jQuery не требуется. Но в крайнем случае (или для других платформ) можно сослаться на Гугль. Вставляем внутри тега HEAD следующий код:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Создаем файл с расширением js, например, "tabs.js" и вставляем в него код скрипта:

(function($) {
$(function() {
  $('ul.tabs').delegate('li:not(.current)', 'click', function() {
    $(this).addClass('current').siblings().removeClass('current')
      .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
  })
})
})(jQuery)

Для создания вкладок нужно переопределить (темизировать) наш тип материала (ноды). Для этого копируем файл node.tpl.php используемой темы в тот же каталог под именем вида "node--тип_метериала.tpl.php". Здесь "тип_метериала" - машинное имя (Machine name) темизируемого типа материала, берется со страницы /admin/structure/types.

Открываем скопированный файл и заменяем в нем код вида:

<?php
      hide($content['comments']);
      hide($content['links']);
      print render($content);
?>

на что-то вроде:

<?php
      hide($content['comments']);
      hide($content['links']);
      hide($content['field_tab1']);
      hide($content['field_tab2']);
      print render($content);
?>
<div class="section">
  <ul class="tabs">
    <li class="current">1-я вкладка</li>
    <li>2-я вкладка</li>
  </ul>
  <div class="box visible">
    <?php print render($content['field_tab1']); ?>
  </div>
  <div class="box">
    <?php print render($content['field_tab2']); ?>
  </div>
</div>

Здесь 'field_tab1' и 'field_tab2' - машинные имена полей, которые нужно выводить в отдельных вкладках. Смысл добавления строк:

hide($content['field_tab1']);
hide($content['field_tab2']);

заключается в том, что "рендерятся поля один раз", и если выполнить код:

print render($content);

не вставив перед ним такие строки (с hide), то будут выведены все поля материала (ноды), а второй раз (во вкладках) мы уже ничего не увидим. Другой вариант: вовсе не выводить все поля чохом (print render($content);), а вставлять их индивидуально каждое, формируя макет дивами (<div>) на свое усмотрение.

Для работы вышеприведенного кода обязательно нужно использовать CSS-стили:

.box {
  display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
  display: block; /* по умолчанию показываем нужный блок */
}

Для примера, назовем файл со стилями "mytabs.css". Свой файл со скриптом (tabs.js) и файл со стилями в Drupal7 подключаются очень просто. Копируем их в каталог темы, например в подкаталог "myscr", и добавляем соответствующие строки в файл темы с расширением info, по аналогии с теми строками, что там уже есть. В нашем случае нужно добавить строки:

stylesheets[all][] = myscr/mytabs.css
scripts[] = myscr/tabs.js

Остальное настраиваем по вкусу.

Рубрики: