This is a modified version of the Mootools class used in QTabs module for Joomla. We distribute it as standalone script because it can be used independently from Joomla!, in other cms or even in static HTML sites.
QTabs allow visitors to view different blocks of information simply by clicking navigational tabs or buttons. Thanks to an autoplay feature the class can also be used to realize simple slideshows.
Some examples follow, complete source code for version 1.11 and 1.2 of Mootools is included in downloadable zip package.
Example 1: fixed height tabs
- First Tab
- Second Tab
- Third Tab
This is the Third TabflexHeight is not set in class options (default value is false): container height is fixed and image is not fully visible
HTML (Head)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Mootools QTabs</title>
<link href="/qtabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mootools.js"></script>
<script type="text/javascript" src="/qtabs.js"></script>
</head>
A valid XHTML DocType is required.
- mootools.js contains the complete Mootools library.
- qtabs.js contains the QTabs class.
- qtabs.css contains css rules for tabs and tab contents styles.
HTML (Body)
<div class="qtwrapper qtwrap-basic">
<div class="qthead-basic">
<ul class="qtabs" id="qtabs-ex1">
<li><span>First Tab</span></li>
<li><span>Second Tab</span></li>
<li><span>Third Tab</span></li>
</ul>
</div>
<div class="qtcurrent current-basic" id="current-ex1">
<div class="qtcontent">
This is the <b>First Tab</b> content
</div>
<div class="qtcontent">
This is the <b>Second Tab</b> content
</div>
<div class="qtcontent">
This is the <b>Third Tab</b> content
</div>
</div>
<div style="clear: both"></div>
</div>
Tabs are made with an unordered list having qtabs as class attribute and qtabs-xx (where xx is a suffix at your choice, in this example basic) as ID. List elements contain titles of each tab.
The list is wrapped inside a DIV with a class attribute of qthead-yy where yy is a suffix at your choice, in this example basic.
Each tab content is inserted inside a DIV with a class attribute of qtcontent. All these DIVs are wrapped inside another DIV with 2 class attributes (qtcurrent, current-yy) and current-xx as ID. Suffixes xx and yy must match those previously used, in this example ex1 and basic.
Finally an outer DIV with class attributes of qtwrapper and qtwrap-yy wraps everything (tabs and tabs contents): come to this point it's easy to guess that yy is basic as the other class suffixes seen above.
It may seem a bit complicated, but suffixes allow us to create multiple groups of tabs with different layouts even on the same page without conflicting class names or duplicate IDs.
<script type="text/javascript">
<!--
window.addEvent('domready', function(){
var t1 = new QTabs('ex1');
})
//-->
</script>
The Mootools class is initialized with ID suffix (ex1).
CSS
If you look at qtabs.css file inside package you will find a section labeled Common Styles where styles for classes used by all examples are defined. This section should never be removed.
Then you will find a section for each tab layout that is available. Each tab layout corresponds to a class suffix: basic, rounded1, lft-blue1. These sections can be removed if you don't need that particular layout.
For example if you need for your site only the layout you see in this example you must keep Common Styles and Basic Tabs sections and you can remove all the others to reduce the size of the .css file.
Example 2: flexible height tabs
- First Tab
- Second Tab
- Third Tab
This is the Third TabflexHeight is true in class options: container height is increased to fit content.
See index.html inside package for complete source code: the HTML is the same than Example 1 except that we use ex2 as ID suffix and round1 as class suffix (see Rounded Tabs section in qtabs.css).
Here is the Javascript:
<script type="text/javascript">
<!--
window.addEvent('domready', function(){
var opt = {
flexHeight: true
};
var t2 = new QTabs('ex2', opt);
})
//-->
</script>
This time our Mootools class is initialized with ID suffix and an object containing class options. In this example we need only one option flexHeight, set to true to create flexible height tabs: if you click on the third tab you will see that container's height is increased to make room for content.
Class options
In addition to flexHeight QTabs supports the following class options:
- def_tab (default 0): index of the tab that is open when the page loads (0=first tab, 1=second tab, 3=third tab ...)
- scrolling (default 0): scrolling effect. Possible values are: 0=no scrolling, 'rl'=right to left, 'lr'=left to right, 'a'=auto, left to right when moving to next tab, right to left when moving to previous tab.
- autoplay (default 0): if true autoplay is active and tab contents are automatically rotated.
- delay (default 3000): number of milliseconds before the next tab is automatically scrolled. Ignored if autoplay is not active.
- duration (default 500): Duration in milliseconds of transition effect. Ignored if scrolling is set to zero (no scrolling).
- transition (default 'Quad'): transition effect, see Mootools docs for possible values and feel free to experiment.
- easing (default 'easeInOut'): possible values are 'easeIn', 'easeOut', 'easeInOut'. See Mootools docs for details.
Example 3: vertical tabs
- First Tab
- Second Tab
- Third Tab
An example of vertical tabs. Even in this case the HTML is the same than in previous examples except that we use ex3 as ID suffix and lft-blue1 as class suffix (see Left Aligned Blue Buttons section in qtabs.css).
<script type="text/javascript">
<!--
window.addEvent('domready', function(){
var opt = {
scrolling: 'rl'
};
var t=new QTabs('ex3', opt);
})
//-->
</script>
A left to right scrolling effect is activated. As duration option is not explicitly set, duration of transition effect (i.e. the time that pass to completely scroll tab content) is the default value of 500 milliseconds.
| Next > |
|---|
