No replies to this topic

[Kess]

These tabs are based on jQueryUI Tabs framework - http://jqueryui.com/demos/tabs/
You don't need to download and install it because it's already present in ZOO component.
 
In order for tabs to work, you need layout that looks similar to this:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Title of the tab 1</a></li>
      <li><a href="#tabs-2">Title of the tab 2</a></li>
      <li><a href="#tabs-3">Title of the tab 3</a></li>
   </ul>
   <div id="tabs-1">
      Contents of the tab 1
   </div>
   <div id="tabs-2">
      Contents of the tab 2      
   </div>
   <div id="tabs-3">
      Contents of the tab 3
   </div>
</div>

You should pay close attention to the presence of id="tabs". It will be used in JavaScript to address our tabs. Also, each tab title link should have an anchor with the id of the corresponding tab. For example, #tabs-1 corresponds to the tab with id="tabs-1".
 
Then you should include jQueryUI framework with this code:

<?php $this->app->jbassets->jQueryUi(); ?>

After this you should write JavaScript code which will convert this layout to dynamic tabs:

<script>
$(function() {
    $( "#tabs" ).tabs();
});
</script>

You can find working example of this layout in this file:
/media/zoo/applications/jbuniversal/templates/catalog/renderer/item/product/full.php
 
It has almost the same layout with some minor changes like checking if a tab has any content.
 
You can change the appearance of these tabs with CSS or you can use theme constructor - http://jqueryui.com/themeroller/
 
 
JBZoo 2.0
 
Previous layout example was written for JBZoo 1.6.1, in JBZoo 2.0 tabs work slightly different. Main changes are less bugs of original jQueryUI Tabs and the ability to use multiple tab groups on one page. In order to take an advantage of these new features, your layout should look a bit different.
 
At the start of the template file you should put this code:

$tabsId = uniqid('jbzoo-tabs-');

And then instead of the 

<div id="tabs">

You should use

<div id="<?php echo $tabsId; ?>">

Lastly, the JavaScript part will have to look like this:

<script type="text/javascript">
    jQuery(function ($) {
        $('#<?php echo $tabsId;?>').JBZooTabs();
    });
</script>

These changes provide each tabs group with unique id which allows to use multiple tab groups.
 
 
Also, one of the bugs of jQueryUI was inability to calculate the dimensions of Google maps element in hidden tabs. Because of this, such maps were displaying incorrectly. In order to solve this issue, you should use slightly modified script which activates tabs:

<script type="text/javascript">
   jQuery(function ($) {
      $('#<?php echo $tabsId;?>').JBZooTabs({
         onTabShow: function (index) {
            var map = $('.googlemaps > div:first');
            if (map.length) {
               map.data('Googlemaps').refresh();
            }
         }
      });
   });
</script>

Edited by SmetDenis, 11 September 2013 - 16:08.