Documentation | Zozo Tabs

Getting Started

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 assets/css/ of your website or project.
3Place z-tabs-icons.png and loading-image.gif in the directory assets/img/ of your website or project.
4Place zozo.tabs.min.js and jquery.min.js (already included in the assets/js folder) in the directory assets/js/ of your website or project.


    Zozo Tabs
    ├── assets/
        ├── 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="/assets/css/zozo.tabs.min.css" rel="stylesheet">
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/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) Using jQueryUse jQuery selector
D) Using HTML5Use HTML5 data attributes

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> 
    document.onreadystatechange = function () {
        if (document.readyState === "interactive" || document.readyState === "complete") {
            $("#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>

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.

jQuery Example
HTML5 Example

$('#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

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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)

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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).

jQuery Example
HTML5 Example

$('#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

jQuery Example
HTML5 Example

$('#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

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 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.

jQuery Example
HTML5 Example

$('#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".

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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.

jQuery Example
HTML5 Example

$('#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

Selects the previous tab and displays the linked content.

Show example

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

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.

UI Components by Zozo UI

Zozo Accordion - Fully Responsive and touch-friendly jQuery Accordion plugin

jQuery Accordion Plugin

Zozo Accordion is Fully responsive and touch-friendly with a lot of customization options that can be integrated into your site/blog quickly without writing any code. Some of its key features includes: such as CSS3 transitions with jQuery fallback, horizontal, vertical, slider, menu accordion, load content with AJAX, custom styled scrollbar for Webkit, 10 unique themes, semantic HTML5 and SEO friendly and much more. Note: This is not a WordPress plugin but it can be easily integrated.

View Demos View Docs

Getting Started

Getting started with Zozo Tabs is very easy and straightforward

A) Unzip and place

B) Installation

C) Usage: using jQuery selector - top

D) Usage: using HTML5 data attributes- top

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.

Methods

Parameters

Parameters

Parameters

Parameters

Parameters

Events

Event Data

Event Data

Event Data

Featured UI Component: Accordion

Check the features below our featured ui component.

UI Components by Zozo UI

Zozo Accordion - Fully Responsive and touch-friendly jQuery Accordion plugin

jQuery Accordion Plugin

see zozo accordion demos

see zozo accordion
demos