Fx.Tabs 2.0

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.

Extends



Details

Author
Shaun Freeman
Current version
2.0
GitHub
vincentbluff/Fx.Tabs
Downloads
12808
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • fx_elementswap/1.0.2: Fx.ElementSwap
  • tabs/1.0: Tabs

How to use

Syntax

new Fx.Tabs([options]);

Arguments

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

Example

The JavaScript part

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

The XHTML part

<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

#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.


Requirements


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus