Недавно встала задача вывести элементы материалов во вкладках, получить достаточную гибкость в шаблонах, и при этом не делать "злых" хаков на уровне ядра ZOO. Задача успешно решена и я хочу поделиться  с вами, предлагая данное пошаговое руководство.

Задача была такова: сохранить как стандартный вывод элементов материалов без вкладок, так и создать специальную позицию вывода для вывода элементов материалов во вкладках. Для примера взято приложение Blog, в котором вкладки необходимо вывести в полном материале.

1. Открываем файл media/zoo/applications/blog/templates/default/renderer/item/positions.xml и добавляем в нужную позицию вывода строку

 name="tabbedcontent">Tabbed Content>

Я добавил вывод содержания во вкладках сразу после позиции Content и в итоге файл positions.xml стал выглядеть следующим образом:

 version="1.0" encoding="utf-8"?>
>
 layout="full">
 name="top">Top>
 name="title">Title>
 name="subtitle">Subtitle>
 name="meta">Meta>
 name="media">Media>
 name="content">Content>
 name="tabbedcontent">Tabbed Content>
 name="taxonomy">Taxonomy>
 name="bottom">Bottom>
 name="related">Related>
 name="author">Author>
>
 layout="teaser">
 name="title">Title>
 name="subtitle">Subtitle>
 name="meta">Meta>
 name="media">Media>
 name="content">Content>
 name="links">Links>
>
 layout="feed">
 name="description">Description>
>
>

Как результат проделанных манипуляций в конфигурации приложения Blog в разметке Full появится наша добавленная позиция для вывода

2. Теперь добавим обработчик позиции в файл разметки полного материала full.php

Открываем файл media/zoo/applications/blog/templates/default/renderer/item/full.php

Находим блок обработчика вывода позиции Content:

 if ($this->checkPosition('content')) : ?>
class="pos-content">
 echo $this->renderPosition('content', array('style' => 'block')); ?>

 endif; ?>

И сразу поле него добавляем обработчик вывода позиции Tabbed Content:

 if ($this->checkPosition('tabbedcontent')) : ?>
class="pos-content">
        
        jimport('joomla.html.pane');
        $pane =& JPane::getInstance('tabs', array('startOffset'=>0));
        $pane_id = mt_rand();  // New unique ID for pane
        echo $pane->startPane( 'pane-'.$pane_id );
        echo $this->renderPosition('tabbedcontent', array('style' => 'tabbedblock'));
        echo $pane->endPane();
        ?>

 endif; ?>
 

В данном обработчике добавляется импорт стандартного класса Joomla JPane, создается экземпляр класса и добавлено открытие и закрытие панели вкладок.

3. Создаем новый файл tabbedblock.php, в него вставляем следующий код:

 
// no direct access
defined('_JEXEC') or die('Restricted access');
 
// Get JPane instance
$pane =& JPane::getInstance('tabs', array('startOffset'=>0));
 
// create label
$label = '';
if (isset($params['showlabel']) && $params['showlabel']) {
$label .= ($params['altlabel'])? $params['altlabel'] : $element->getConfig()->get('name');
}
 
// create class attribute
$class = 'element element-'.$element->getElementType().' '.($params['first'] ? ' first' : '').($params['last'] ? ' last' : '');
 
$panel_id = mt_rand(); // New unique ID for panel
echo $pane->startPanel( $label, 'panel-'.$panel_id ); // Starting new tab with Label from ZOO element as tab header and unique ID
echo $element->render($params); // Rendering element
echo $pane->endPanel(); // Closing tab
?>

Сохраняем данный файл в кодировке UTF-8 и помещаем в папку:
components/com_zoo/renderer/element/

Немного поясню код.  Сначала мы получаем ссылку на уже созданный экземпляр объекта. Далее мы используем генератор случайных чисел для того, чтобы получить уникальный ID для вкладки. Собственно, это было также сделано и при открытия самой панели в файле full.php в п.2. В примерах реализации вкладок для ZOO, которые гуляют по сети, никто особо не озадачивался идентификаторами создаваемых объектов, а просто списали код примера создания вкладок из API Joomla с одним стандартным идентификатором панели "pane". Это чревато конфликтами с другими приложениями, а также, если в будущем возникнет необходимость добавлять по несколько панелей вкладок и обращаться к ним -это вызовет неприятные последствия в виде дублей идентификаторов. Если отнестись очень критически к самому себе, то перед проверкой создания идентификатора объекта, стоило бы проверять наличие объекта с таким именем, однако я верю в генератор случайных чисел PHP и в данном случае не заморачивался с этим
Ну и далее, открываем вкладку, рендерим элемент и закрываем вкладку.

4. Потестируем вывод. В конфигурации приложения Blog добавим 3 поля Textarea и добавим их в разметку Full, не забыв при этом включить отображение метки элемента, которое у нас служит для вывода текста заголовка вкладки.



Далее создаем новый материал типа Article (либо редактируем уже существующий) и вводим любой текст в поля Вкладка 1, Вкладка 2, Вкладка 3. Смотрим полный вид данного материала и в результате должно получиться что-то, похожее на это:



Можете пощелкать и убедиться, что вкладки переключаются и работают. Если не работает, внимательно проверьте все написанное выше шаг за шагом. Если все сделано правильно, то не исключено, что у вас конфликтуют Java-скрипты и надо разрешать конфликты.

5. Ну и собственно, финальный штрих - привести вкладки к тому виду, в котором мы их привыкли видеть...

Для этого открываем CSS файл приложения Blog: media/zoo/applications/blog/templates/default/assets/css/item.css, добавляем следующие стили для вкладок и сохраняем файл:

dl.tabs {
   float: left;
   margin: 10px 0 -1px 0;
   z-index: 50;
}
dl.tabs dt {
   float: left;
   padding: 4px 10px;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
   margin-left: 3px;
   background: #f0f0f0;
   color: #666;
}
dl.tabs dt.open {
   background: #F9F9F9;
   border-bottom: 1px solid #F9F9F9;
   z-index: 100;
   color: #000;
}
div.current {
   clear: both;
   border: 1px solid #ccc;
   padding: 10px 10px;
}
div.current dd {
   padding: 0;
   margin: 0;
}

Если мы обновим страничку, то мы увидим, что все стало на свои места - вкладки отображаются как мы привыкли их видеть, примерно так, как на картинке ниже. Любители красот, блеска и шика могут поизгаляться в CSS, чтобы было совсем красиво и соответствовало шаблону сайта



В примере были показаны текстовые элементы, но все отлично работает со всем типами контента, включая картинки, галереи, видео и т.д.

оригинал статьи