Tuesday, January 27, 2009

Joomla! 1.5 How to create Tabs through the Joomla Framework

It is quite easy to create tabs through the Joomla's Framwork.

According to the Joomla API documentation the class to use is the JPane class, specifically an instance of a JPaneTabs class.

The folloing code get the instance of a JPaneTabs class
<?php
//Inform Joomla we want to make use of panes
jimport('joomla.html.pane');
   //Get JPaneTabs instance
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0)); 
?>
The first parameter of JPane::getInstance() specify the apearance of the pane, in this case tabs. Another option is sliders. What the function basically do is append the first parameter to the JPane name and create an instanc of that class. E.g. 'JPane' + 'Tabs' give you JPaneTabs. Ths same is true for the Sliders.

The Second parameter specify the starting, or default, tab.

Once there is an instance of the JPaneTabs, Joomla need to know that it should start with a Tab pane. The JPaneTabs ::startPane($id) will be used with the first parameter a unique id. All panes needs to be accessed by Mootools which will use the unique id in order to draw the tabs correctly.

What is a pane without some tabs? The  JPaneTabs ::startPanel($title,$id) function will inform Joomla that a new tab should be created. IT takes a tab name or title as a first parameter and a unique id as the second parameter. (id is for Mootools).

An example implimentation will look as follows:

<?php
//Inform Joomla we want to make use of panes
jimport('joomla.html.pane');
//Get JPaneTabs instance
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';
//Create Pane
$output .= $myTabs->startPane( 'pane' );
//Create 1st Tab
$output .= $myTabs->startPanel( '1st', 'tab1' );
$output  .= '<p>This is the first tab</p>';
$output .= $myTabs->endPanel();
//Create 2nd Tab
$output .= $myTabs->startPanel( '2nd', 'tab2' );
$output  .= '<p>This is the secondt tab</p>';
$output .= $myTabs->endPanel();
//Create 3rd Tab
$output .= $myTabs->startPanel( '3rd', 'tab3' );
$output  .= '<p>This is the third tab</p>';
$output .= $myTabs->endPanel();
//End Pane
$output .= $myTabs->endPane();
//Output to web
echo $output;
?>
Once the tabs have been created it is important to create styles for the id's specified in the code. It can be created in the template's template.css file.

Example styles will look as follows:
dl.tabs {
float: left;
margin: 10px 0 -1px 0;
z-index: 50;
}

dl.tabs dt {
float: left;
padding: 4px 10px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 3px;
background: #f0f0f0;
color: #666;
}

dl.tabs dt.open {
background: #F9F9F9;
border-bottom: 1px solid #F9F9F9;
z-index: 100;
color: #000;
}

div.current { 
clear: both; 
border: 1px solid #ccc; 
padding: 10px 10px;
}

div.current dd 
{ 
padding: 0; 
margin: 0;
}
And that is it.

Fun thing to do: Create sliders from the above code.