Skip to content
MooTools Plugin to handle a Tabbed layout
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Demo
Docs
Source
CHANGES
README.md
package.yml
screenshot.png

README.md

Fx.Tabs - An Advanced Tab Swapper

Fx.Tabs is the new name for MorphTabs.

Fx.Tabs is a complete clone of mooTabs by silverscripting. I have updated it for mootools 1.2.4 and it will not work with mootool 1.11 and below.

I have also added some new effects which I hope you all will like!

Because Fx.Tabs is based heaverly on mootabs some of the options and documentation is the same, but there are some important changes to note.

Inherits methods, properties, options and events from Tabs.

Screenshot

jsFiddle Demo

Extends

Requirements

How to use

Syntax

new Fx.Tabs([options]);

Arguments

  1. options - (object, optional) An object with options. See:

Example

The JavaScript part

#JS
window.addEvent('domready', function() {
    var fxTabs = new Fx.Tabs();
});

The XHTML part

#HTML
<div id="tabs">

    <!-- tab headings -->

    <ul class="tabs_title">
        <li title="my_work">My Work</li>
        <li title="about_me">About Me</li>

        <li title="contact">Contact</li>
    </ul>


    <!-- Tab1 content -->

    <div id="my_work" class="tabs_panel">
        <h1>Tab 1</h1>
        <p>content</p>
    </div>

    <!-- Tab2 content -->

    <div id="about_me" class="tabs_panel">
        <h1>Tab 2</h1>
        <p>content</p>
    </div>

    <!-- Tab3 content -->

    <div id="contact" class="tabs_panel">
        <h1>Tab 3</h1>
        <p>content</p>
    </div>

</div>

The CSS part

Customizing the look of the tabs require a certain knowledge of CSS. What I would suggest is to look at the examples of tabs in the the Demo folder, they should be a good starting point.

Example

#CSS
#tabs {
position:relative;
width:300px;
height:200px;
overflow:hidden;
}

.tabs_title {
    list-style-image: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    height: 24px;
}

.tabs_title li {
    float: left;
    background-color: #3975BD;
    padding: 2px 8px 2px 8px;
    margin-right: 2px;
    cursor: pointer;
    color: #fff;
    font-family: "Trebuchet MS";
    font-size: 12px;
    height: 24px;
    line-height: 24px;
}

.tabs_title a {
    text-decoration:none;
    color: #fff;
}

.tabs_title li.over {
    font-weight: bold;
}

.tabs_title li.active {
    background-color: #49A8EC;
}

.tabs_panelwrap {
    position: absolute;
    top:28px;
    overflow: hidden;
    width:300px;
    height:172px;
}

.tabs_panel {
    /*position:absolute;
    top:28px;*/
    width:300px;
    height:172px;
    display:none;
    overflow: auto;
    background-color: #49A8EC;
    color: #fff;
    clear: both;
}

.tabs_panel.active {
    display: block;
}

.tabs_panel p {
    margin-left:5px;
}

The styling is completly left to you this is why I would suggest you to read up a bit on CSS if you are new to it, before you start styling the tabs.

Something went wrong with that request. Please try again.