Тематика: По цвету: Красный Желтый Зеленый Синий Оранжевый Розовый Серый Белый Черный Мульти

Ваш сайт на CMS Joomla? Добавьте его в галерею Joomfans!

Вы можете совершенно бесплатно добавить ваш веб-сайт в нашу галерею сайтов. Подробнее...

Галерея Добавить

Главная Статьи Блог Как создать вкладки (табы, панели) в материале ZOO 2.0
Как создать вкладки (табы, панели) в материале ZOO 2.0

Недавно встала задача вывести элементы материалов во вкладках, получить достаточную гибкость в шаблонах, и при этом не делать "злых" хаков на уровне ядра 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 и в данном случае не заморачивался с этим Azn
Ну и далее, открываем вкладку, рендерим элемент и закрываем вкладку.

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, чтобы было совсем красиво и соответствовало шаблону сайта Wink



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

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

 

Комментарии

+3Goha01.04.2014 14:32#1
А для Zoo 3.0.6 можно создать вкладки?
Цитировать

Добавить комментарий


Защитный код


Литература

8 видеоуроков по…

На днях популярная и известная студия по разработке шаблонов и…

Joomla!…

Если вы часто создаете сайты на CMS Joomla! 1.6, 1.7 или 2.5 то вы…

10 легких шагов к…

Прочитав книгу Хагена Графа «10 легких шагов к освоению Joomla! 3.0»…

Joomla! 2.5 -…

Книга «Joomla! 2.5 - Руководство для начинающего пользователя»…

Инструменты

Akeeba SiteDiff

При создании сайта, всегда есть вероятность того что он будет взломан…

Morph Framework

Последняя обновленная и уже совершенно бесплатная версия фреймворка…

CodeLobster PHP…

Очень мощный и многофункциональный редактор РНР, HTML, CSS,…

JB Zen Grid Framework…

Последняя обновленная версия фреймворка Zen Grid от студии…