Табы-новости

Для создания шаблона табы-новости я использовал 3 файла, два основных default.php и _item.php, и создал один дополнительный  _htabs.php - для вывода заголовков табов.

Файлы default.php и _htabs.php

Посмотрев код вывода табов на сайте Bootstrap, видно, что каждый таб состоит из 2-х частей:

- пункта списка с заголовком таба
- само тело таба в отдельном контейнере

Поэтому выводить их придется последовательно, и цикл в модуле нужно запускать 2 раза. Один раз для формирования списка заголовков, второй - для вывода содержимого самого материала

1. Создаем копию файла default.php и переименовываем в tabnews.php
2. Создаем дополнительный файл _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

1. Создаем копию файла _item.php и переименовываем в _itemtabs.php
2. Поместить код вывода материала в контейнеры с css-классами Bootstrap

<?php
defined('_JEXEC') or die;
$images = json_decode($item->images);
?>
<div id="<?php echo $tabId;?>" class="tab-pane<?php echo $activeTab; ?>">
   <!-- выводим дату -->
   <!-- выводим изображение -->
   <!-- выводим вступительный текст материала -->
   <!-- выводим конпку Подробнее -->
</div>

Может это и не самый оптимальный способ. Но он простой и рабочий :)

Скачкть файлы примера: tabs.zip