Все не знал с какого слова начать, но вы во мне прям музу разбудили.))
Вообще сразу скажу, что идея не моя, вычитал где то на этом форуме, просто допиленная под zoo.(а конкретно под product catalog, если это имеет значение)
Итак. 1. Открываем full.php
После вывода позиции TOP(хотя ее тоже можно в отдельную вкладку) вставляем сообственно сами вкладки:
т.е. перед строчкой <div class="floatbox">
<div class="section">
<ul class="tabs">
<li class="current">
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
TAB1
</div>
</li> <li>
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
TAB2
</div>
</li> <li>
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
TAB3
</div>
</li></ul>
Для наглядности, я использовал для описания каждой вкладки свой цвет.
Маленько поясню(дивы box-t1, box-t2, box-t3 нужны чтобы вкладки выглядели закругленными, если хотите квадратные то можно их убрать, тут дело вкуса)
2. Потом далее нам нужно по вкладкам распихать нужные нам позиции:
вот как это выглядит для моего примера, для наглядности опять выделю цветами в соответствии с вкладками
<div class="box visible">
<div class="floatbox">
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
<?php if ($this->checkPosition('specification')) : ?>
<div class="pos-specification">
<h3><?php echo JText::_('Specifications'); ?></h3>
<ul>
<?php echo $this->renderPosition('specification', array('style' => 'list')); ?>
</ul>
</div>
<?php endif; ?>
<?php if ($this->checkPosition('carbody')) : ?>
<div class="pos-carbody">
<h3><?php echo JText::_('Carbody'); ?></h3>
<ul>
<?php echo $this->renderPosition('carbody', array('style' => 'list')); ?>
</ul>
</div>
<?php endif; ?>
</div>
<div class="box-b1">
<div class="box-b2">
<div class="box-b3"></div>
</div>
</div>
</div>
</div><div class="box">
<div class="floatbox">
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
<?php if ($this->checkPosition('media')) : ?>
<div class="pos-media <?php echo 'media-'.$view->params->get('template.item_media_alignment'); ?> ">
<?php echo $this->renderPosition('media', array('style' => 'block')); ?>
</div>
<?php endif; ?>
</div>
<div class="box-b1">
<div class="box-b2">
<div class="box-b3"></div>
</div>
</div>
</div>
</div><div class="box">
<div class="floatbox">
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
<?php if ($this->checkPosition('description')) : ?>
<div class="pos-description">
<h3><?php echo JText::_('History'); ?></h3>
<?php echo $this->renderPosition('description', array('style' => 'block')); ?>
</div>
<?php endif; ?>
</div>
<div class="box-b1">
<div class="box-b2">
<div class="box-b3"></div>
</div>
</div>
</div>
</div> Думаю что ничего сложного все наглядно понятно.
3. далее в item.css в конец добавляем:
/* tabs--------------------------------------------------------- */
#yoo-zoo .section ul.tabs { padding-left: 25px; }
#yoo-zoo .section .tabs div.box-t1 {
width: 150px;
float: none;
}
#yoo-zoo .section .tabs div.box-t2 { }
#yoo-zoo .section .tabs div.box-t3 { }
#yoo-zoo .section .tabs div.box-b1 { width: 150px;}
#yoo-zoo .section .tabs div.box-b2 { }
#yoo-zoo .section .tabs div.box-b3 { }
#yoo-zoo .section .tabs li {
list-style: none;
margin: 0 1px -1px 0;
padding: 0px;
width: 150px;
float: left;
color: #C8CBCD;
text-align: center;
position: relative;
cursor: pointer;
}
#yoo-zoo .section .tabs li.current {
border-bottom: 1px solid #5D5D5D;
color: #FFFFFF;
}
.box {
clear: both;
display: none;
}
.box.visible {
clear: both;
display: block;
Тут соответсвтенно меняем цвета под свои темы, и вообще стиль под свою тему. Данный стиль, то что на скриншоте в моем примере
4. Ну и сообственно jQuery скрипт, который заставляет наши вкладки работать.
Поместить можно хоть куда, хоть в начало файла. Я сделал отдельный файл zoo_tabs.js? положил его в components/com_zoo/assets/js
(function($) {
$(function() {
$('ul.tabs').each(function() {
$(this).find('li').each(function(i) {
$(this).click(function(){
$(this).addClass('current').siblings().removeClass('current');
var p = $(this).parents('div.section');
p.find('div.box visible').addClass('box');
p.find('div.box').hide();
p.find('div.box:eq('+i+')').fadeIn(150);
});
});
});
});
})(jQuery)
и подключил его в файле /components/com_zoo/zoo.php строчкой:
//add zoo_tabs.js
JHTML::script('zoo_tabs.js', ZOO_SITE_URI . 'assets/js/');
Вот и все. Как я уже и говорил, решение не совсем тривиальное, но вполне реализуемое. Если возникнут вопросы, задавайте, оперативность ответа не гарантирую.))
19.09.2016, 12:28:10