Как сделать вкладки в JBZoo?

Принцип работы вкладок JBZoo Tabs

Начиная с версии 2.0 приложение использует собственную библиотеку для виджета вкладок. Наш вариант очень похож на популярный виджет jQuery UI Tabs, но получился легким и более быстрым. Таким образом, нам удалось избежать некоторых конфликтов в JavaScript, и уменьшить общий объем страницы.

Типичный код для вкладок представлен ниже. Рекомендуется использовать его внутри шаблона материала Full.

<?php
$this->app->jbassets->tabs(); // подключение необходимого JS и CSS
$tabsId = uniqid('jbzoo-tabs-'); // уникальный идетификатор
?>
<div id="<?php echo $tabsId; ?>" class="rborder">
    <ul>
        <li><a href="#tabs-1">Заголовок вкладки 1</a></li>
        <li><a href="#tabs-2">Заголовок вкладки 2</a></li>
        <li><a href="#tabs-3">Заголовок вкладки 3</a></li>
    </ul>
    <div id="tabs-1">Содержимое вкладки 1</div>
    <div id="tabs-2">Содержимое вкладки 2</div>
    <div id="tabs-3">Содержимое вкладки 3</div>
</div>
<!-- JS Инициализация -->
<script type="text/javascript">
    jQuery(function ($) {
        $('#<?php echo $tabsId;?>').JBZooTabs();
    });
</script>

Особое внимание нужно обратить на идентификаторы тегов (атрибут id):

• Общий тег должен иметь уникальный селектор, чтобы избежать конфликтов JS, например, когда на одной странице используется сразу несколько виджетов. В данном случае уникальность достигается с помощью id="<?php echo $tabsId; ?>".

• Каждая вкладка должна иметь ссылку вида href="#tabs-1″, каждая из которых соответствует своему контейнеру с атрибутом id="tabs-1″.

• После этого кода, ниже нужно написать JavaScript код, который сделает из этой верстки динамические вкладки. Также обратите внимание, что в нем используется уникальный селектор
  $(’#<?php echo $tabsId;?>’).

Где посмотреть пример в шаблонах JBZoo ?

Полный пример можно найти в шаблоне Full продукта

/media/zoo/applications/jbuniversal/templates/catalog/renderer/item/product/full.php

С единственной разницей, что там каждая вкладка обрамлена условием проверки позиции. Таким образом, если во вкладке ничего нет, то она не отобразится.

Внешний вид настраивается полностью через CSS. Виджет автоматически генерирует различные HTML-классы с соответствующими названиями, поэтому при касмтоизации у вас не должно возникнуть никаких проблем.

Возможные проблемы с JBZoo Tabs

Помимо классических проблем Joomla и JavaScript, встречаются проблемы с инициализацией сторонних виджетов внутри скрытой вкладки. Наиболее яркий пример — это элемент Zoo GoogleMaps. Если сразу после загрузки страницы перейти на вкладку с картой, то она получится обрезанной или очень маленького размера.

Причина ошибки кроется в недрах JavaScript+CSS. JS не всегда может высчитать размеры тега (width и height), если он находится внутри скрытого контейнера (style="display:none;"). Поэтому GoogleMaps не может вычислить размеры самого себя, при этом вы не получите никаких ошибок в консоли браузера.

Чтобы решить эту проблему, необходимо насильно перерисовать карту с помощью API GoogleMaps. Для этих целей можно использовать событие onTabShow из виджета JBZoo Tabs.

<script type="text/javascript">
    jQuery(function ($) {
        $('#<?php echo $tabsId;?>').JBZooTabs({
            onTabShow: function (index) { // в index будет хранится номер текущей вкладки
                var map = $('.googlemaps > div:first'); // ищем карту Google
                if (map.length) { 
                    map.data('Googlemaps').refresh(); // инициализация
                }
            }
        });
    });
</script>

JBZoo и jQuery UI Tabs

Ранее, во времена JBZoo версии 1.x, для создания вкладок мы использовали встроенные возможности Zoo+ jQuery UI.

Верстка и инициализация очень схожи с тем, что представлено выше. Ниже пример с использованием jQuery UI. Внимание! Он актуален только для JBZoo 1.6.1 и ниже.

<div id="jbzoo-tabs" class="rborder">
    <ul>
        <li><a href="#tab-text">Текст</a></li>
        <li><a href="#tab-props">Характеристики</a></li>
        <li><a href="#tab-comments">Разное</a></li>
    </ul>

    <div id="tab-text"><?php echo $this->renderPosition('tab-text'); ?></div>
    <div id="tab-props"><?php echo $this->renderPosition('tab-props'); ?></div>
    <div id="tab-comments"><?php echo $this->renderPosition('tab-comments'); ?></div>
</div>

<?php $this->app->jbassets->jQueryUi();?> <!-- подключаем jQuery UI -->
<script type="text/javascript">
    jQuery(function ($) {
        $('#jbzoo-tabs').tabs(); // инициализация из jQuery UI Tabs
    });
</script>

Разницу не стоит объяснять, практически она только в инициализации. Важно, что при формировании ссылок на вкладку стоит указывать абсолютный путь до страницы. Например так

<?php echo $this->app->jbenv->getCurrentUrl();?>#tab-text

Это связано с тем, что в некоторых версиях jQuery есть неприятный баг, из-за которого внутрь вкладки загружалась копия сайта. В итоге браузер мог повиснуть.