MorphTabs

MorphTabs is based on mooTabs by silverscripting. I have rewritten it for mootools 1.2.3 and it will not work with mootool 1.2.2 and below.

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

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

Please post all problems and also any suggestions, improvents and bugs here at http://www.mooforum.net/scripts12/morphtabs-t325.html

Special Thanks to:

• Rob Verzera

Sites using morphTabs:

• Poppy Scotland (on front page using the slideShow option)

Requirements:

• to use morphTabs v2.1 you will need mootools v1.2.3 core which can be got here.
• the ability to apply the code to your XHTML page. (I will help by giving you an example here).
• has been tested on and works in:
  • Internet Explorer 8, 7 & 6
  • Firefox 3
  • Opera 9
  • Safari 4

Changes:

• version 2.1
  • minor bug prevented two instances of MorphTabs on same page, fixed.
• version 2.0
  • Complete rewrite and updated for MooTools 1.2.3
  • All styling is now done via external CSS so you have complete freedom and control over how your tabs and panel look and feel.
  • Ajax calls can be done one or more tabs.
  • Added onTab option
• version 1.4
  • Bug fix:
    • line 59 : issue with lists in panel fixed.
• version 1.3
  • Bug fix:
    • line 87 : issue with IE and NaN (fix by Rob Verzera)
• version 1.2
  • New Methods:
    • added start
    • added stop
  • New Options:
    • added SlideShow
    • added SlideShowDelay
• version 1.1
  • New Options:
    • added activateTabFunction
    • added evalScripts
• version 1.0
  • 1st release

Download:

The lasetest version of morphTabs is v2.0 and you can download form here.
The download files include:

• demo
• JavaScript files
• compressed version of MorphTabs

Demo:

Here are some examples of MorphTabs in action:

1. MorphTabs using default CSS File and Default Options: Watch
2. MorphTabs with javascript event inside tab1: Watch
3. MorphTabs with accordian inside tabs: Watch
4. MorphTabs using next() and previous() methods: Watch
5. MorphTabs using Slide Show effect: Watch

Example Usage:

What to include

MorphTabs is easy to use, you just include mootools 1.2.3, then the MorphTabs js and finaly the CSS file for styling your tabs in the head section of your XHTML page like:

 The JavaScript part

Then under this you add this code changing the 'id_of_container' referance to your morphTabs div id and add any options within the curly braces

 The XHTML part

 The XHTML part consists of three parts:

1. A main DIV (ID can be anything).
2. An unordered list (Class has to be set to "morphtabs_title").
3. A set of DIV that will become the Tab Panels (Class has to be set to "morphtabs_panel").

Here is an example:

1. The main DIV is the container of the whole tab interface (Line 1 in the example).
2. The unordered list consist of the Tabs themselves (i.e. NOT the panels, but the clickable tabs). To associate a Tab with it's Panel, you have to define the "title" attribute of the list item (<li>). The title of the <li> element needs to be the same as the ID of the panel linked to it. The label of the Tab is the innerHTML content of the list item. (Lines 5 to 9 in the example).
3. The set of divs consists of your tab panels. The class has to be set to "morphtabs_panel" and the ID of the panel has to be the same as the list item (<li>)'s title. (Lines 13 to 27 in the example).

Styling (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 on this page (see the demos), they all use the same CSS file that you can download and this should be a good starting point.

In most cases the width and height are the styles you would most be concerned with.

I would suggest you to read up a bit on CSS if you are new to it, before you start styling the tabs.

Options:

In this class we have options that we have to set, if you don't want the default options that is.

The default options are:

 What does this mean?

-tabs: array, a collection of DOM elements for the tabs; can also be a $$ selector (string). (Default: '.morphtabs_title li')
-panels: array, a collection of DOM elements for the panels; can also be a $$ selector (string). (Default: '.morphtabs_panel')
-panelClass: String, The CSS Class name you want to use for the panels (Default: 'morphtabs_panel')
-selectedClass: String, The CSS Class name you want to use when a tab is selected (Default: 'active')
-mouseOverClass: String, The CSS Class name you want to use when a tab is mousedover (Default: 'over')
-activateOnLoad: String, can be set to 'first' to activate the first tab on load, 'none' to leave all the tabs hidden on load, or any tab's title to activate this tab on load (Default: 'first')
-slideShow: Boolean, whether to start the tabs in slideshow mode or not. (Default: false)
-slideShowDelay: Interger, the number of seconds to delay before showing next tab. (Default: 3)
-ajaxOptions: Object, The object containing the options for the Ajax request (Default: {})
-onShow: (function) callback executed when a panel is shown; passed one arguments: the tab (element) (Default: $empty)
-panelWrapClass: String, The CSS Class name you want to use for the panel wrap (Default: 'morphtabs_panelwrap')
-TransitionFx: An Fx.Transitions object. see mootools Fx for options. (Default: {transition: 'linear', duration, 'long'})
-panelStartFx: String, the type of effect when transition starts. Can any one of:

• blind:up
• blind:down
• blind:left
• blind:right
• slide:up
• slide:down
• slide:left
• slide:right
• fade
• appear

(Default: 'blind:left')
-panelEndFx: String, same as panelStartFx but for the type of effect when transition ends. See panelStartFx for options (Default: 'blind:right')

A note on using AJAX:

if you want to use AJAX to get the content of a panel, just use a link to the page you want in the tab headings like: