A repository of over 1000 quality jQuery plugins

jQuery colorfulTab

colorfulTab is a jQuery UI plugin.

Created by knyttneve

simple & colorful jquery tab plugin — demo:

Not what you're looking for? Click here to view more UI jQuery plugins

colorfulTab

simple & colorful jquery tab plugin

Demo


Usage

$("#exampleTab").colorfulTab();

HTML Structure

<div class="colorful-tab-wrapper" id="examplaTab">

    <!-- Tab Menu -->
    <ul class="colorful-tab-menu">
        <li class="colorful-tab-menu-item active" data-color="#000">
            <a href="#tab1">Tab 1</a>
        </li>
        <li class="colorful-tab-menu-item" data-color="#353535">
            <a href="#tab2">Tab 2</a>
        </li>
        <li class="colorful-tab-menu-item" data-color="#d5d5d5">
            <a href="#tab3">Tab 3</a>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="colorful-tab-container">
        <div class="colorful-tab-content active" id="tab1">...</div>
        <div class="colorful-tab-content" id="tab2">...</div>
        <div class="colorful-tab-content" id="tab3">...</div>
    </div>

</div>

Options

theme, backgroundImage, overlayColor, overlayOpacity

Example :

$("#exampleTab").colorfulTab({
    theme:"flatline",
    backgroundImage:"true",
    overlayColor: "#002F68",
    overlayOpacity: "0.8"
});

Background Image

<ul class="colorful-tab-menu">
    <li class="colorful-tab-menu-item" data-background="image.jpg">
    ...
</ul>

Create a Custom Theme

Example :

$("#exampleTab").colorfulTab({
    theme:"custom-theme"
});

SCSS

.custom-theme{
    .colorful-tab-menu{
        /* custom style */
    }
    .colorful-tab-menu-item{
        /* custom style */
    }
    .colorful-tab-container{
        /* custom style */
    }
    .colorful-tab-content{
        /* custom style */
    }
}

License

MIT



You might also like these other UI jQuery Plugins

  • jQuery.mousetip

    Extension for cursor tooltips that follow mouse movement

  • jQCloud

    jQuery plugin for drawing neat word clouds that actually look like clouds

  • toolgif

    A very simple Jquery gif tooltip plugin.

 Views
 Downloads

Preview Download Github Page
License:

The MIT License (MIT)