jQuery Plugin – fabio.tabs.js

I’ve been in the back-end for years. But today my choices have changed a bit. I’m no designer and always use pre-made templates when building web apps; however, CSS and HTML is becoming more and more part of my daily commitments.

I’ve always been writing Javascript and jQuery code that can be reused, although I never turned those code into plugins Today I thought, why not? So I created this plugin and interesting enough, it’s been actually used by other developers in the company I work for.

My first jQuery plugin is called Tabs for a reason, for instance, if you have a limited amount of space, tabs can allow you to save room by giving the user a way to toggle between several div containers. And it has the option to simulate loading.

fabio.tabs.js is very simple. I know there are a lot of plugins like that and better out there, but this one is mine! 🙂

 Download Now at GitHub.

Example of usage:

<div id="myTabs">
    <div class="tab">
        What is Lorem
    </div>
    <div class="tab">
        Why do we use it?
    </div>
    <div class="data">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="data">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
</div>

<script type="text/javascript">
    $("#myTabs").tabs();
</script>

fabio tabs

Options:

Property Description Default
animate true/false true
waitTime Time in milliseconds to simulate the wait. Not used if animate is false. 500
fadeIn The same of jQuery fadeIn effect to use when showing the div. 'slow'
contentWidth The content width. '100%'
tabWidth The tab width. '146px'
Example:

    $("#myTabs").tabs({ animate: true, waitTime: 1000, fadeIn: 'fast', contentWidth: '500px' });

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s