Аккордеон-новости
- 08 февраля 2017
Файл default.php
- Создаем копию файла default.php и переименовываем в accordion.php
- Поместить код модуля в контейнеры с css-классами Bootstrap
- Создать уникальные индексы для вкладок аккордеона
- Создать класс
' in'
для активной вкладки
<?php defined('_JEXEC') or die; $idMod = 'accrd'.$module->id; ?> <div class="accordion" id="<?php echo $idMod; ?>"> <?php for ($i = 0, $n = count($list); $i < $n; $i ++) : $item = $list[$i]; //Создание уникального индекса для вкладок //Создание активной вкладки $articleId = $item->alias.$item->id; $collapseId = $idMod.'-a'.$i; $activecollapse = ''; if ($i == 0) { $activecollapse = ' in'; } ?> //Файл _item.php после редактирования будет сохранен как _item_accordion.php <div class="accordion-group"> <?php require JModuleHelper::getLayoutPath('mod_articles_news', '_item-accordion'); ?> </div> <?php endfor; ?> </div>
Файл _item.php
- Создаем копию файла _item.php и переименовываем в _item-accordion.php
- Создаем контейнер
accordion-heading
для вывода заголовка материала во вкладке - Поместить код вывода материала в контейнеры с соответствующими css-классами Bootstrap
<?php defined('_JEXEC') or die; $images = json_decode($item->images); ?> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#<?php echo $idMod; ?>" href="#<?php echo $collapseId; ?>"> <?php echo $item->title;?> </a> </div> <div id="<?php echo $collapseId; ?>" class="accordion-body collapse<?php echo $activecollapse; ?>"> <div class="accordion-inner"> <!-- выводим дату --> <!-- выводим изображение --> <!-- выводим вступительный текст материала --> <!-- выводим конпку Подробнее --> </div> </div>
Скачкть файлы примера: accordion.zip