Табы-новости
- 08 февраля 2017
Для создания шаблона табы-новости я использовал 3 файла, два основных default.php и _item.php, и создал один дополнительный _htabs.php - для вывода заголовков табов.
Файлы default.php и _htabs.php
Посмотрев код вывода табов на сайте Bootstrap, видно, что каждый таб состоит из 2-х частей:
- пункта списка с заголовком таба
- само тело таба в отдельном контейнере
Поэтому выводить их придется последовательно, и цикл в модуле нужно запускать 2 раза. Один раз для формирования списка заголовков, второй - для вывода содержимого самого материала
- Создаем копию файла default.php и переименовываем в tabnews.php
- Создаем дополнительный файл _htabs.php для вывода заголовков
Функционально файл можно представить так:
<?php defined('_JEXEC') or die; $idMod = 'tabs'.$module->id; ?> <!-- Первая часть. Список. --> <ul class="nav nav-tabs"> <?php //Генерируем список заголовков; ?> </ul> <!-- Вторая часть. Тело. --> <div class="tab-content"> <?php //Вывод материалов; ?> </div>
Первая часть. Создание списка заголовков:
<ul id="<?php echo $idMod; ?>" class="nav nav-tabs"> <?php for ($i = 0, $n = count($list); $i < $n; $i ++) : $item = $list[$i]; $tabId = $idMod.'-a'.$i; $activeTab = ''; if ($i == 0) { $activeTab = ' active'; } ?> //Заголовки получаем из файла _htabs.php <li class="tbs<?php echo $activeTab; ?>"> <?php require JModuleHelper::getLayoutPath('mod_articles_news', '_htabs'); ?> </li> <?php endfor; ?> </ul>
Вторая часть. Вывод тела материалов:
<div class="tab-content newsflash"> <?php for ($i = 0, $n = count($list); $i < $n; $i ++) : $item = $list[$i]; $tabId = $idMod.'-a'.$i; $activeTab = ''; if ($i == 0) { $activeTab = ' active'; } //Файл _item.php после редактирования будет сохранен как _itemtabs.php require JModuleHelper::getLayoutPath('mod_articles_news', '_itemtabs'); endfor; ?> </div>
Файл _htabs.php содержит только код вывода заголовка материалов:
<?php defined('_JEXEC') or die; ?> <a href="#<?php echo $tabId;?>" data-toggle="tab"><?php echo $item->title;?></a>
Файл _item.php
- Создаем копию файла _item.php и переименовываем в _itemtabs.php
- Поместить код вывода материала в контейнеры с css-классами Bootstrap
<?php defined('_JEXEC') or die; $images = json_decode($item->images); ?> <div id="<?php echo $tabId;?>" class="tab-pane<?php echo $activeTab; ?>"> <!-- выводим дату --> <!-- выводим изображение --> <!-- выводим вступительный текст материала --> <!-- выводим конпку Подробнее --> </div>
Может это и не самый оптимальный способ. Но он простой и рабочий :)
Изменения
В последствии, я интегрировал файл _htabs.php в основной макет tabnews.php. Можете попробовать сделать это самостоятельно.
Нужно в макете вставить код файла, вместо строки его подключения.
Скачкть файлы примера: tabs.zip