Zozo UI - HTML5, CSS3, jQuery

Zozo Tabs - Documentation

Thank you for purchasing our software and becoming one of our valued clients. This document is provided to you to help you get started with our software. For extended documentation and API refference check http://zozoui.com.
We appreciate our clients and look forward to receiving feedback from you. Please don't forget to rate it!

Unzip and place
Installation
Usage: using jQuery selector
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 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) 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> 
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>

Zozo Tabs - Documentation

Table of Contents

A) Unzip and place

B) Installation

C) Usage: using jQuery selector - top

D) Usage: using HTML5 data attributes- top

More Tutorials