1. Доступ к загрузкам имеют пользователи со статусом КЛИЕНТЫ (заказчики сайта)
    Для обновления одного шаблона необходимо оплатить услугу Техническая поддержка (500 руб. - Яндекс-деньги или банковский перевод) модуль справа-внизу, сообщить {admin_forum} контактный e-mail
  2. У наших подписчиков ВКонтакте появилась возможность скачать первую версию любого шаблона для ознакомления абсолютно бесплатно. Вступаем и заказываем нужный шаблон на странице группы - https://vk.com/yootheme
    Скрыть объявление

Как работают вкладки (jQuery tabs) на странице продуктов

Тема в разделе "FAQ по JBZoo", создана пользователем admin_forum, 4 ноя 2013.

  1. admin_forum
    Оффлайн

    admin_forum Администратор Команда форума

    В основе вкладок лежит библиотека jQueryUI Tabs - http://jqueryui.com/demos/tabs/
    Её скачивать и устанавливать на сайте не нужно, она уже есть в компоненте Zoo

    Чтобы сработали вкладки нужна верстка примерно следующего вида

    Код:
    <div id="tabs">
      <ul>
      <li><a href="<?php echo JUri::getInstance()->toString();?>#tabs-1">Заголовок вкладки 1</a></li>
      <li><a href="<?php echo JUri::getInstance()->toString();?>#tabs-2">Заголовок вкладки 2</a></li>
      <li><a href="<?php echo JUri::getInstance()->toString();?>#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>
    
    Особое внимание нужно обратить на наличие id="tabs" (по нему потом будем обращаться к вкладкам через JavaScript)

    И каждая вкладка должна иметь ссылку href="#tabs-1" соответствующую контенту id="tabs-1"

    после этого кода, ниже нужно написать JavaScript код, который сделает из этой верстки динамические вкладки

    Код:
    <script>
    $(function() {
      $( "#tabs" ).tabs();
    });
    </script>
    
    и обязательно подключим саму библиотеку следующей строчкой в PHP

    Код:
    <?php $this->app->jbassets->jQueryUi(); ?>
    
    Рабочий пример можно найти в файле

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

    В этом файле принцип создания вкладок тот же самый, только добавлены условия отображения той или иной вкладки в зависимости от наличия элементов на ней.
    class="rborder" - добавить слегка закругленную рамочку вокруг


    Внешний вид настраивается полностью через CSS - http://htmlbook.ru/css
    Либо можете использовать конструктор тем http://jqueryui.com/themeroller/

    Внимание

    Не рекомендуется располагать на скрытой вкладке карту google и некоторые виджеты.
    Из-за особенностей браузеров не возможно вычислить размеры внутри скрытого элемента через JavaScript.
    Поэтому карты и другие виджеты могут отображаться не верно.
    Это не ошибка JBZoo!

    В интернете есть решения этой проблемы, но на мой взгляд они не достойны внимания в виду сложности либо глючности. Поэтому не рекомендую!

    У jQueryUI.tabs есть баг. Иногда в внутрь какой-нибудь вкладки подгружается сам сайт.
    Либо страница начинает очень долго грузиться по непонятным причинам, либо через какое-то время после тяжелой загрузки браузер показывает белый экран.

    Вот суть бага jQuery.UI Tabs (если вдруг знаете английский) - http://bugs.jqueryui.com/ticket/7822. Это официальный багрепорт jQuery UI
    Если кратко, то виджет берет href из ссылки (которая переключает вкладки) и сравнивает с текущим адресом.
    При сравнении не учитывались дополнительные GET параметры поэтому ссылка считалась внешний и грузился контент в вкладку (т.е сам себя)

    Решение, которое "обманывает" виджет - в ссылках указывать не только хеш, а всю ссылку текущую страницу.

    В шаблоне материала (например для продукта, /media/zoo/applications/jbuniversal/templates/catalog/renderer/item/product/full.php)

    Код ссылки-переключателя вкладок был такой
    Код:
    <li><a href="#tab-text">Описание</a></li>
    Заменить на следующий
    Код:
    <li><a href="<?php echo JUri::getInstance()->toString();?>#tab-text">Описание</a></li>
    Конструктор собственных тем для табов - http://jqueryui.com/themeroller/
    Скачивайте понравившуюся тему и подключаете новый CSS на свой сайт в основном шаблоне Joomla
     

Поделиться этой страницей