article:
Elements Design & Mobile: iOS 7 Wireframe Kit (AI)
article:
Website: Website Verti Theme (HTML / CSS)

JS Plugins: Tabulous.js

Advertisement

Tabulous.js can be used with any contents you choose in the tabs and it couldn't be more simpler to use.

Resource Plugin: Tabulous.js


Implementation

include jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

include stylesheet

<link href='tabulous.css' rel='stylesheet' type='text/css'>

include html code
<div id="tabs">
    <ul>
        <li><a href="#tabs-1" title="">Tab 1</a></li>
        <li><a href="#tabs-2" title="">Tab 2</a></li>
        <li><a href="#tabs-3" title="">Tab 3</a></li>
    </ul>

    <div id="tabs_container">
        

        <div id="tabs-1">
            <!--tab content-->
        </div>

        <div id="tabs-2">
               <!--tab content-->
    
        </div>

        <div id="tabs-3">
                <!--tab content-->
        </div>

    </div><!--End tabs container-->
 
</div><!--End tabs-->

include javascript code
$(document).ready(function($) {
    $('#tabs').tabulous({
        effect: 'scale'
    });
});



demo scale effects
demo flip effects
demo scale up effects
demo slide left effects
download
github

Advertisement
Tags: plugin, tabs, javascript, container, stylesheet, css, html, code, creative3x, tab

Leave a Comment

No Comment

© Creative3x Ltd.