Description:

JTabs is a tabbing script system that allows for large amounts of content to occupy the same space on a page in an organized manner. JTabs places multiple tabs that will toggle the display of information inside the content area.

This widget was built using the Mootools JavaScript framework as a base.

Features:

Multiple Instances: JTabs allows for multiple instances of its self to exists on the same page and even allows nested instances.

Self Styling: With the Self Styling option, JTabs allows novice users to fore go the need to apply complex css styles themselves. Advanced users have the option to turn this off and fully customize the look and feel of the system.

Custom Events: Like other scripts from Richmeier Consulting JTabs offers several custom events that will allow advanced users full control over JTabs functionality. From fade effects on the tabs and tab pages to pre-initialization effects users can remove pre-existing event effects and fully customize how each state of the widget looks and feels.

Paging Effects: JTabs makes use of mootools scrolling effects and as such all of the mootools transition Fx are available to the user, combining these with the systems custom events users have unlimited options and control over how paging is animated. You can find a list of mootools transition effects HERE and demos of how each effect looks HERE (please note this transition demo is from mootools version 1.11).

Documentation:

Implements:

Syntax:

Arguments:

1. containerElement - (mixed) A string ID of the Element containing the widget.
2. options - (options, optional) See below.

.

Options:

• activeStyle - (string, defaults to activeJTab) The Css class name used to style active tabs
• transition - (function, defaults to Fx.Transitions.Quad.easeInOut) Can be a Fx.Transitions function or a user-provided function which will be extended with easing functions..
• duration - (integer, defaults to 800) The duration of the effect in ms. Can also be one of:
  • 'short' - 250ms
  • 'normal' - 500ms
  • 'long' - 1000ms
• selfStyle - (boolean, true) if true the script applys the styles needed for a functional tab system on the html elements inside the containerElement.
• pageHeight - (mixed, defaults to false) if false the widget self sizes its height according to the tab content. set to a pixel height to apply a fixed height.
• pageWidth - (integer, defaults to 500) sets the width of the widget only if selfStyle is true.
• interval - (mixed, defaults to false) The delay time in ms before automatically switching to the next tab page. if false (default) it will do nothing.

.

Events:

-- initialize --

-- selfStyle --

-- tabEnter --

-- tabLeave --

-- tabClick --

-- complete --

Properties:

• running - (boolean) True if a tab animation is active.
• activeTabIndex - (integer) Index number of the current active tab page.

Example:

Html:

<div id="Jtabs">

<ul>
     <li>Page 1</li>
     <li>Page 2</li>

     <li>Page 3</li>
</ul>
<div>
     <ul> 
          <li> <!-- Page 1 -->

               <h2>Page 1</h2>
               Page 1 Text here
          </li>

          
          <li> <!-- Page 2 -->
               <h2>Page 2</h2>
               Page 2 Text here
          </li> 
          <li> <!-- Page 3 -->

               <h2>Page 3</h2>
               Page 3 Text here
          </li>                   
     </ul>

</div>
</div>

CSS:

.activeJtab {

background-color: #808080;
}

JavaScript:

window.addEvent('domready',function(){

var jTabInstance = new JTabs("Jtabs",{
     activeStyle: "activeJtab",

     duration: 800,
     pageWidth: 500
});

});

Change Log:

-- 8/29/2009 --

changes:

• added Events: initialize, selfStyle, tabEnter, tabLeave, tabClick, and complete.
• added interval functionality
• added new property running
• Finished widget description content
• Finished Documentation
• added selfStyle functionality
• added self height sizing

Demo:

Download:

You can download the Mootools framework HERE.

Standard Version:

Standalone Version: