Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A MooTools class for making a tabbed box.
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Demo
Docs
Source
README.md
package.yml
screenshot.png

README.md

Tabs - A Simple Tab Swapper

Tabs is a very simple yet powerful as all the styling for the tabbed box is done via CSS and completly comtrolled by you. It is part of my MooTools library so you will need to use ElementSwap for it to work.

Screenshot

Requirements

How to use

Syntax

#JS
var myTabs = new Tabs([options]);

Arguments

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

Options

  • tabs - (mixed: defauls to '.tabs_title li') (array), a collection of DOM elements for the tabs; can also be a $$ selector (string).
  • panels - (mixed: default to '.tabs_panel') (array), a collection of DOM elements for the panels; can also be a $$ selector (string).
  • selectedClass - (string: defaults to 'active') the CSS class name you want to use when a tab is selected.
  • elementSwapOptions - (object) ElementSwap options object, see ElementSwap for available options. (Defaults to: { selectedClass: 'active', panelWrap: 'tabsPanelWrap', panelWrapClass: 'tabs_panelwrap', activateOnLoad: 0, events: true, autoPlay: false })
  • mouseOverClass - (string: defaults to 'over') the CSS class name you want to use when a tab is mousedover

Events

  • onActive - (function) callback executed when a tab is shown, passed two arguments: the index of the tab (integer), the tab (element)
  • onBackground - (function) callback executed when a tab is hidden, passed one argument: the tab (element)

Example

JavaScript

#JS
var myTabs = new Tabs();

CSS

#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;
}

HTML

#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>
Something went wrong with that request. Please try again.