Getting Started

Buy it for only $7 Live Examples

Getting started with Zozo Tabs is very easy and straightforward

A) Unzip and place

  • 1Unzip the contents of the file which you downloaded from codecanyon.net.
  • 2Place zozo.tabs.min.css in the directory css/ of your website or project.
  • 3Place z-tabs-icons.png and loading-image.gif in the directory img/ of your website or project.
  • 4Place zozo.tabs.min.js and jquery.min.js


    Zozo Tabs/
    ├── css/
    │   └── zozo.tabs.min.css
    ├── img/
    │   ├── z-tabs-icons.png (Mobile)
    │   └── loading-image.gif (AJAX)
    └── js/
        ├── jquery.min.js 
        └── zozo.tabs.min.js


You should have the above directory structure for website/app. Please note: Most site already includes jQuery. If your site already includes jQuery or jQuery Easing plugin, do not include them and remove it from above includes. If you want to know how to include and use the new flat themes, read the following article: How to use Flat Themes.


B) Installation

Installing Zozo Tabs is very easy and straight-forward. Simply add the following link and scripts tags with your proper paths and paste the following code within the <head></head> tags of your HTML document.

<link href="/css/zozo.tabs.min.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/zozo.tabs.min.js"></script>


You are now ready to use Zozo Tabs in your website or poject. The final step is to activate our Tabs. Zozo Tabs is very easy to use and very flexible becuase we can activate it using jQuery selector like any other plugin, but we can also activate it using HTML5 data attributes. That means no JavaScript/jQuery skills are required. Just use one of the method below C or D.


C) Usage: using jQuery selector - top

This section assumes that you have already included Zozo Tabs required files as described in section Installation. Creating Zozo Tabs is very simple. All we need is to create the basic HTML markup for our Tabs and activate it using jQuery selector.
  • 1The basic HTML markup

    Below the basic HTML markup for our Tabs, a div element which contains sections. Inside each section tag we have a h3 tag for the header and div tag for it's content. Paste the following HTML anywhere within the <body></body> tag:

    <div id="tabbed-nav">
      <ul>
            <li><a>Design</a></li>
    	<li><a>Specs</a></li>
    	<li><a>Price</a></li>                           
    	<li><a>Release Date</a></li>
      </ul>
      <div>
    	<div>Design</div>
    	<div>Specs</div>
    	<div>Price</div>
    	<div>Release Date</div>         
      </div>
    </div>
  • 2Activate using jQuery selector

    Below we using jQuery's selector within $(document).ready() to ativate our Tabs. In the below example change a few options for our Tabs. Check the online documentation for Extended HTML documentation. Paste the following code just before </body> tag:

    <script> 
    jQuery(document).ready(function ($) {
        $("#tabbed-nav").zozoTabs({
            theme: "silver",      
            animation: {
                duration: 800,
                effects: "slideH"
            }
        })
    });
    </script>
    

D) Usage: using HTML5 data attributes- top

This section assumes that you have already included Zozo Tabs required files as described in section Installation.

This the second way to create Zozo Tabs using HTML5 data attributes and we don't need additional JavaScript code. The basic HTML markup stays the same. We are going to add a few HTML5 data attributes. The first one is data-role of "z-Tabs" which is required to activate the tabs. In below example we are also including data-options attribute to change the theme and other options. These data- attributes are used throughout Zozo Tabs to transform basic markup into an enhanced and styled widget.

That means we only need the following HTML markup with HTML5 data attributes and past it anywhere within the <body></body> tag:

<div id='tabbed-nav' data-role='z-tabs' data-options='{"theme": "silver", "animation": {"duration": 800, "effects": "slideH"}}'>
  <ul>
        <li><a>Design</a></li>
	<li><a>Specs</a></li>
	<li><a>Price</a></li>                           
	<li><a>Release Date</a></li>
  </ul>
  <div>
	<div>Design</div>
	<div>Specs</div>
	<div>Price</div>
	<div>Release Date</div>        
  </div>
</div>

More Tutorials

Options

The following default options are provided by the plugin. They can be overridden and customized by passing options object to the initialization of the plugin and by using HTML5 data attributes on the container element.

animation - Object (default: 'Object')

this object holds settings about animation, Setting the effects option to none will disable all animations.

$('#tabbed-nav').zozoTabs({
    animation: {
        duration: 600,
        effects: "slideV",
        easing: "easeInQuad",
        type: "css"
    }    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"animation": {"duration": 600, "effects": "slideV", "easing": "easeInQuad", "type": "css"}}'>
    ...

animation.duration - Number (default: '600')

Number determining how long the animation will run, default value is 600

$('#tabbed-nav').zozoTabs({
    animation: {
        duration: 600
    }    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"animation": {"duration": 600"}}'>
    ...

animation.effects - String (default: 'slideV')

Default value is 'slideV'. There are eageightht animation effects: slideH, slideLeft, slideRight, slideV,slideUp, slideDown,slideUpDown, fade and you can set it o none to disable animation.

$('#tabbed-nav').zozoTabs({
    animation: {
        effects: "slideV"
    }    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"animation": {"effects": "slideH"}}'>
    ...

animation.easing - String (default: ''swing' or 'easeInQuad'')

Default value is 'swing' or 'easeInQuad' when jQuery easing plugin is included. All effects except 'linear' and 'swing' require the easing plugin. List of easing effects is on the easing website. jQuery easing plugin is completely optional for advanced easing.

$('#tabbed-nav').zozoTabs({
    animation: {
        easing: "easeInQuad"
    }    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"animation": {"easing": "easeInQuad"}}'>
    ...

animation.type - String (default: 'css')

Default value is 'swing' or 'easeInQuad' when jQuery easing plugin is included.
All effects except 'linear' and 'swing' require the easing plugin. List of easing effects is on the easing website. jQuery easing plugin is completely optional for advanced easing.

$('#tabbed-nav').zozoTabs({
    animation: {
        type: "css"
    }    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"animation": {"type": "css"}}'>
    ...

autoplay - Object (default: 'Object')

Autoplay can be enabled via tab options. Delay between items can be set via interval property of autoplay. When smart is enabled, autoplay will stop at first user action

$('#tabbed-nav').zozoTabs({
    autoplay: {        
        interval: 2000,
        smart: true        
    }    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"autoplay": {"interval": 2000, "smart": true}}'>
    ...

bordered - Number (default: 'true')

This options enbales borders. Note: When style option is set to 'clean' or flat themes (v6.0) are enabled. Follow this post how to use flat themes.

$('#tabbed-nav').zozoTabs({
    bordered: false    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"bordered": false}'>
    ...

cacheAjax - Number (default: 'true')

By default every single AJAX requests are cached after the first time.

$('#tabbed-nav').zozoTabs({
    cacheAjax: false    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"cacheAjax": false}'>
    ...

contentUrls - Array (default: 'null')

The content urls to load tabs content with AJAX. The url can also a link to external site and in that case the options iframe should be true as well to load iframe content via AJAX.

$('#tabbed-nav').zozoTabs({
    contentUrls: [       
        "ajax-content/content1.html",
        "ajax-content/content2.html",
        "ajax-content/content3.html",
        "ajax-content/content4.html"
    ]    
});
<div id='tabbed-nav' data-role='z-tabs' data-options='{"theme": "silver"}'>
  <ul>
        <li><a>ThemeForest</a></li>
	<li><a>CodeCanyon</a></li>
	<li><a>Content 1</a></li>                           
	<li><a>Content 2</a></li>
  </ul>
    <div>
        <div data-content-url='http://www.themeforest.net' data-content-type='iframe'></div>
        <div data-content-url='http://www.codecanyon.net' data-content-type='iframe'></div>
        <div data-content-url='ajax-content/content1.html'></div>    
        <div data-content-url='ajax-content/content2.html'></div>     
  </div>
</div>

deeplinking - Boolean (default: 'false')

The active tab is set based on the #hash value passed to the url. Makes URL automatically change when you select tabs and you can easily link to specific tab. Step by setp tutorial: Create Bookmarkable Tabs (Deeplinking).

The plugin make use of HTML5 hashchange event. HTML5 hashchange event is supported by all modern browsers. If want cross-browser support for HTML5 window.onhashchange event, you can include jQuery hashchange plugin by Ben Alman. Please note that this is completely optional.

$('#tabbed-nav').zozoTabs({
    deeplinking: true    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"deeplinking": true}'>
    ...

deeplinkingAutoScroll - Boolean (default: 'false')

Option deeplinkingAutoScroll, auto scroll to top on page load when using hashtage in the url to a specific tab.

$('#tabbed-nav').zozoTabs({
    deeplinking: true,
    deeplinkingAutoScroll: true    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"deeplinking": true, "deeplinkingAutoScroll": true}'>
    ...

deeplinkingPrefix - String (default: '')

This options is for advanced deeplinking. Add a deeplinkingPrefix when deeplinking is enabled. Note: this will only effect if deeplinking is enabled and deeplinkingSeparator should be set to one of its allowed separator.

$('#tabbed-nav').zozoTabs({
    deeplinking: true,
    deeplinkingPrefix: "products",
    deeplinkingSeparator: "/"    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"deeplinking": true, "deeplinkingPrefix": "products", "deeplinkingSeparator": "/"}'>
    ...

deeplinkingSeparator - String (default: '')

This options is for advanced deeplinking. Add a separator when deeplinking is enabled. Note: this will only effect if deeplinking is enabled also keep in mind tabs should have an id or deeplinkingPrefix should be set to a string value as prefix (example: products/productA)

$('#tabbed-nav').zozoTabs({
    deeplinking: true,
    deeplinkingPrefix: "products",
    deeplinkingSeparator: "/"    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"deeplinking": true, "deeplinkingPrefix": "products", "deeplinkingSeparator": "/"}'>
    ...

defaultTab - String (default: 'tab1')

The default selected tab when page is loaded.

$('#tabbed-nav').zozoTabs({
    defaultTab: 'tab2'    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"defaultTab": "tab2"}'>
    ...

event - String (default: 'click')

The type of event that the tabs should react to in order to activate the tab. To activate on hover, use 'mouseover'. When a mobile device is detected it will use the mobile touchend event (without 300ms delay).

$('#tabbed-nav').zozoTabs({
    event: 'mouseover'     
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"event": "mouseover"}'>
    ...

maxRows - Number (default: '2')

This option is used for switching to dropdown menu when executed

$('#tabbed-nav').zozoTabs({
    maxRows: 5     
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"maxRows": 5}'>
    ...

minWindowWidth - Number (default: '720')

This option is part of responsive feature, used for switching to dropdown menu when executed

$('#tabbed-nav').zozoTabs({
    minWindowWidth: 840     
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"minWindowWidth": 840}'>
    ...

mobileNav - Boolean (default: 'true')

When responsive tabs are enabled, the tabs are displayed in a slick dropdown menu on mobile devices with touch support.

$('#tabbed-nav').zozoTabs({
    mobileNav: false    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"mobileNav": false}'>
    ...

multiline - Boolean (default: 'false')

To add headlines to tabs wrap the second line of text between a span tag and set the option multiline to true. Please have a look the Multiline Tabs example.

$('#tabbed-nav').zozoTabs({
    multiline: false    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"multiline": false}'>
    ...

position - String (default: 'top-left')

The position option specifies how zozo tabs will be positioned in the document. By default there are eight options available, "top-left", "top-center", "top-right", "top-compact", "bottom-left", "bottom-center", "bottom-right" and "bottom-compact". Note: When orientation option is set to "vertical", "only top-left" and "top-right" is supported.

$('#tabbed-nav').zozoTabs({
    position: "top-right"    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"position": "top-right"}'>
    ...

orientation - String (default: 'horizontal')

The orientation of the zozo tab, accepts either "horizontal" or "vertical".

$('#tabbed-nav').zozoTabs({
    orientation: "vertical"    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"orientation": "vertical"}'>
    ...

rememberState - Boolean (default: 'false')

Remember tabs state (defaultTab). The data is saved in HTML5 LocalStorage. Also the tabs id is required in order to save it.

$('#tabbed-nav').zozoTabs({
    rememberState: true    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"rememberState": true}'>
    ...

responsive - Boolean (default: 'true')

Unique responsive feature of Zozo Tabs will stack the tabs when tabs doesn't fit the parent element and on mobile device it will display tabs in slick dropdown menu. compatible with Tablet, Desktop and Mobile. The layout of the components are scaled according to resolution of the device.

$('#tabbed-nav').zozoTabs({
    responsive: false    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"responsive": false}'>
    ...

responsiveDelay - Number (default: '100')

This is used for delay on window rezise to re-stack the tabs or change it to mobile dropdown.

$('#tabbed-nav').zozoTabs({
    responsiveDelay: 0    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"responsiveDelay": 0}'>
    ...

rounded - Boolean (default: 'false')

Apply CSS3 rounded corners to z-tab, Note: Rounded corners is only supported in modern browers.

$('#tabbed-nav').zozoTabs({
    rounded: true    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"rounded": true}'>
    ...

shadows - Boolean (default: 'true')

Apply CSS3 shadows to z-tab, Note: Shadows is only supported in modern browers.

$('#tabbed-nav').zozoTabs({
    shadows: false    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"shadows": false}'>
    ...

size - String (default: 'medium')

Zozo Tabs comes in 6 different sizes, "mini", "small", "medium", "large", "xlarge" and "xxlarge". This options works with all themes and positions and orientations.

$('#tabbed-nav').zozoTabs({
    size: "xxlarge"    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"size": "xxlarge"}'>
    ...

spaced - Boolean (default: 'false')

Addes spacing between tabs. Note: this options only effects the new flat themes (v6.0). Follow this post how to use flat themes.

$('#tabbed-nav').zozoTabs({
    theme: "flat-alizarin", 
    spaced: true    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"theme": "flat-alizarin", "spaced": true}'>
    ...

style - String (default: 'normal')

Zozo Tabs comes in 3 different styles, normal, underlined, clean. The default value is normal, change this option only if you want to have underlined or clean tabs. This options works with all themes and positions and orientations.

$('#tabbed-nav').zozoTabs({
    style: "clean"    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"style": "clean"}'>
    ...

theme - String (default: 'silver')

10 built-in themes that are ready to go (white, crystal, silver, gray, black, orange, red, green, blue, deepblue). Also added 20 flat themes in version 6.0. In order to use flat themes, we need include the flat themes css files. Please read the following article: How to use Flat Themes.

$('#tabbed-nav').zozoTabs({
    theme: "white"    
});
<div id="tabbed-nav" data-role="z-tabs" data-options='{"theme": "white"}'>
    ...

Methods

select

Selects a specified tab by index and displays the linked content.

 Show example
$("#tabbed-nav").data('zozoTabs').select(1);

Parameters

index int

The index of the tab in the tabs

prev

Selects the previous tab and displays the linked content.

 Show example
$("#tabbed-nav").data('zozoTabs').prev();

next

Selects the next tab and displays the linked content.

 Show example
$("#tabbed-nav").data('zozoTabs').next();

first

Selects the first tab and displays the linked content.

 Show example
$("#tabbed-nav").data('zozoTabs').first();

last

Selects the last tab and displays the linked content.

 Show example
$("#tabbed-nav").data('zozoTabs').last();

setOptions

Set options by passing object which contains single or multiple options, read more about those settings in the options

 Show example
$("#tabbed-nav").data('zozoTabs').setOptions({ 
    orientation: "horizontal", 
    position: "bottom-right",
    theme: "green" 
});

Parameters

options object

tab options object

play

Automatically progress through next tab. AutoPlay will stop autoplaying if a user interacts with the tab navigation.

 Show example
$("#tabbed-nav").data('zozoTabs').play(5000);

Parameters

interval int

The interval at which the tabs should progress at in milliseconds.

stop

Stops the tabs autoplay.

 Show example
$("#tabbed-nav").data('zozoTabs').stop();

add

Add a tab to the tab collections by specifing the tab text and the content.

 Show example
$("#tabbed-nav").data('zozoTabs').add("New Tab", "<h4>New tab content...</h4>");

Parameters

tab String

The text of the tab

content String

The text of the content, we can also use to insert HTML into content

refresh

Adjust the content height of zozo tabs when adding new content dynamically.

 Show example
$("#tabbed-nav").data('zozoTabs').refresh();

remove

Remove a specified tab and the linked content by index.

 Show example
$("#tabbed-nav").data('zozoTabs').remove(1);

Parameters

index int

The index of the tab in the tabs

Events

ready

This ready is triggered after the tabs element is activated via jQuery.

 Show example
var onReady = function(event, item) {
    console.log("tabs are ready");
};

$("#tabbed-nav").zozoTabs({
    ready: onReady
});

Event Data

event Event object

The event data object

item object

The main tab element as jQuery object.

select

This event is triggered after a tab has been activated (after animation completes).

 Show example
var onSelect = function(event, item) {
    console.log("Selected tab text: " + item.tab.text());
};

$("#tabbed-nav").zozoTabs({
    select: onSelect
});

Event Data

event Event object

The event data object

item.index Number

The index of the selected tab.

item.tab jQuery object

The selected tab element

item.content jQuery object

The content element of the selected tab.

deactivate

This event is triggered after a tab has been activated (after animation completes).

 Show example
var onDeactivate = function(event, item) {
    console.log("deactivated tab text: " + item.tab.text());
};

$("#tabbed-nav").zozoTabs({
    deactivate: onDeactivate
});

Event Data

event Event object

The event data object

item.index Number

The index of the deactivated tab.

item.tab jQuery object

The deactivated tab element

item.content jQuery object

The content element of the deactivated tab.