Zozo Tabs

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works also on older browsers such as IE7 and IE8?

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Usage

Fully documented and step-by-step guide provided to help you get up and running with Zozo Tabs.

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Documentation

This sections is provided to you to help you get started with our software. We appreciate our clients and look forward to receiving feedback from you. Please don't forget to rate it!

Table of Contents

  1. Unzip and place
  2. Installation
  3. Usage: using jQuery selector
  4. Usage: using HTML5 data attributes

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 zozo.tabs.min.js and jQuery in the directory js/ of your website or project.

B) Installation

Installing Zozo Tabs is very easy and straight-forward. Simply add the following link and scripts tags with your proper paths, 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-1.8.2.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.

C) Usage: using jQuery selector

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 an unordered list for tabs with associated div elements for 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><h4>Design</h4></div>
    	<div><h4>Specs</h4></div>
    	<div><h4>Price</h4></div>
    	<div><h4>Release Date</h4></div>        
      </div>
    </div>
  • 2Activate using jQuery selector

    Below we using jQuery's selector within $(document).ready() to ativate our tabs. Paste the following code just before </body> tag:

    <script> 
    $(document).ready(function(){
        $("#tabbed-nav").zozoTabs({
            theme: "green"                    
        });
    });
    </script>
    

    After Zozo Tabs has been initialised, it will also add all necessary css classes for styling and theming. In above example we have included a optional option to change the theme (Zozo Tabs comes with 6 built-in themes that are ready to go and accepts a lot of configuration options, see section configuration for further information).

D) Usage: using HTML5 data attributes

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.

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. In below example we are also including data-theme attribute to change the theme. 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-theme="green">
  <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><h4>Design</h4></div>
	<div><h4>Specs</h4></div>
	<div><h4>Price</h4></div>
	<div><h4>Release Date</h4></div>        
  </div>
</div>

That's it! Soon will come more tutorials for detailed summaries of how to create more complex tabs on www.faridesign.net and www.zozoui.com

Live Examples

Following live examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.

Example 1: vertical orientation, top-left position, crystal theme, third-party icons

Example 1 showcasing third-party icons integration with Zozo Tabs, we are using Font Awesome. These icons are not included with Zozo Tabs. You can download it from their site and check out how to install it on your website or project. Soon will come the source code for all examples and more tutorials how to create more complex tabs.

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Usage

Fully documented and step-by-step guide provided to help you get up and running with Zozo Tabs.

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 2: vertical orientation, top-right position, gray theme

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Usage

Fully documented and step-by-step guide provided to help you get up and running with Zozo Tabs.

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 3: horizontal orientation, top-compact position, crystal theme

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Usage

Fully documented and step-by-step guide provided to help you get up and running with Zozo Tabs.

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 4: horizontal orientation, top-center position, gray theme

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 5: horizontal orientation, top-right position, red theme

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 6: horizontal orientation, bottom-left position, gray theme

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 7: horizontal orientation, bottom-center position, crystal theme

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 8: horizontal orientation, bottom-right position, green theme

Overview

Zozo Tabs is a lightweight highly customizable jQuery plugin to provide full tab functionality that can be integrated into your site/blog quickly and easily. Some of it's key features includes: such as horizontal & vertical tabs, CSS3 & HTML5 design, 8 ways to position, 6 themes, SEO-friendly and more. Did we mention it works on older browsers such as IE7 and IE8?.

Features

  • Fully documented and explained and free Support
  • 8 Flexible ways to position
  • Multiple Instances
  • SEO Friendly
  • Horizontal & Vertical Tabs
  • Autoplay Support
  • CSS3 & HTML5 design
  • 6 Themes
  • Fully customizable
  • Cross-browser
  • Dynamically add & remove tabs
  • Bookmarkable tabs
  • Codeless creation & customization with HTML5 data attributes
  • Ability to change tabs event (click/mousehover)
  • Interactive methods: select, first, last, next and previous

Themes

  • Blue
  • Crystal
  • Gray
  • Green
  • Red
  • Silver

Release

Zozo Tabs is released in November 2012 on codecanyon.net

Example 9: horizontal orientation, top-compact position, variety themes

Overview

Features

Themes

Release

Overview

Features

Themes

Release

Overview

Features

Themes

Release

Overview

Features

Themes

Release

Example 10: horizontal orientation, bottom-compact position, variety themes

Overview

Features

Themes

Release

Overview

Features

Themes

Release

Overview

Features

Themes

Release

Overview

Features

Themes

Release

API Reference

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

Configuration

animation Object

this object holds settings about animation, Setting this option to false will disable all animations.

 Show example
$("#tabbed-nav").zozoTabs({
    animation: {
        duration: 200,
        effects: "fadeIn",
        easing: "swing"
    }
});

animation.duration Number(default: 200)

number determining how long the animation will run, default value is 200

 Show example
$("#tabbed-nav").zozoTabs({
    animation: {
        duration: 200
    }
});

animation.effects String(default: "fadeIn")

there two type of animation "slideDown" and "fadeIn", default value is "fadeIin"

 Show example
$("#tabbed-nav").zozoTabs({
    animation: {
        effects: "fadeIin"
    }
});

animation.easing String(default: "swing")

there two type of easing "swing" and "linear", default value is "swing"

 Show example
$("#tabbed-nav").zozoTabs({
    animation: {
        easing: "swing"
    }
});

autoplay object

Autoplay can be enabled via tab options. Delay between items can be set via interval property of autoplay

 Show example
$("#tabbed-nav").zozoTabs({
    autoplay: {
        interval: 0
    }
});

defaultTab String(default: "tab1")

The default selected tab when page is loaded.

 Show example
$("#tabbed-nav").zozoTabs({
    classes: {
        defaultTab: "tab1"
    }
});

event String(event: "click")

The type of event that the tabs should react to in order to activate the tab. To activate on hover, use "mouseover".

 Show example
$("#tabbed-nav").zozoTabs({
    event: "mouseover"    
});

hashAttribute String(default: "data-link")

HTML data attribute which holds the tab refference, this will be also visible in the browers address bar when urlBased is enabled.

 Show example
$("#tabbed-nav").zozoTabs({
    classes: {
        hashAttribute: "data-link"
    }
});

position String(default: "top-left")

The position option specifies how z-tab 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.

 Show example
$("#tabbed-nav").zozoTabs({position: "top-right"});

orientation String(default: "horizontal")

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

 Show example
$("#tabbed-nav").zozoTabs({orientation: "vertical"});

rounded Boolean(default: true)

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

 Show example
$("#tabbed-nav").zozoTabs({rounded: false});

shadows Boolean(default: true)

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

 Show example
$("#tabbed-nav").zozoTabs({shadows: false});

tabWidth Number(default: 150)

Determines the tab width of the z-tab, Note: This is only applied when orientation option is set to "horizontal" and position option is set to "top-compact" or "bottom-compact".

 Show example
$("#tabbed-nav").zozoTabs({tabWidth: 200});

theme String(default: "silver")

By default there are six themes available, "silver", "gray", "crystal", "red", "green" and "blue".

 Show example
$("#tabbed-nav").zozoTabs({theme: "blue"});

urlBased Boolean(default: false)

Enables url based tabs, the active tab based on the #hash value passed to the url. 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.

 Show example
$("#tabbed-nav").zozoTabs({urlBased: true});

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 configuration

 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({ 
    interval: 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
$("#h-nav-silver").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

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

select

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

 Show example
var onSelect = function(tab, content) {
    console.log(tab);
    console.log(content);
    console.log("Activated tab text: " + tab.find("a.t-link").text());
};

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

Event Data

tab HTMLElement

The activated tab

content HTMLElement

The content element of the activated tab.

Subscribe

New releases, updates, sneak peeks & exclusive deals right in your inbox.

Leave your name and email and we will notify you about our new release or update. We don't do spam.

Contact Us

We always want to make sure that you are satisfied with your purchase. For support you can contact us using the following ways.

We would love to see zozo ui in action! Please don't hesitate to send us live link, any info, screen shots, etc. showing it to us. We would be more than happy to add a link to zozoui.com or on our codecanyon page to your website.

Share Us

Did you enjoy our products? Please take a minute Rate it! on codecanyon.net and Share it!

Copyright © 2012 Zozo UI. All rights reserved.

Version History

Version 1.0

  • Initial Release.
  • Create horizontal and vertical tabs.

Sources & Credits