Tabs 1.0

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.



Details

Author
Shaun Freeman
Current version
1.0
GitHub
vincentbluff/Tabs
Downloads
3191
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • elementswap/1.0.1: ElementSwap

How to use

Syntax

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

var myTabs = new Tabs();

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

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

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