Update 14, January, 2010
WOW, This extension has been approved by JED Team. Pls visit it and place you rating.
If you check joomla1.5.x backend(joomla1.x had same) in any component or module configuration the right col accordian slider is common. In some components u should see tab too.To make such tab and slider is just so easy !
I think you are thinking about my post title, why I used the words “home made”. Because I am going to show you how u can make such a tab/slider module for front end just using joomla own resource. Joomla gives some execillent api to make html grid, tab, slider etc within a moment. JPane is such an api to make tab and slider. Here you will get some code example about how to make tab using JPane.
jimport('joomla.html.pane');
//1st Parameter: Specify 'tabs' as appearance
//2nd Parameter: Starting with third tab as the default (zero based index)
//open one!
$pane =& JPane::getInstance('tabs', array('startOffset'=>2));
echo $pane->startPane( 'pane' );
echo $pane->startPanel( 'Example Panel 1', 'panel1' );
echo "This is panel1";
echo $pane->endPanel();
echo $pane->startPanel( 'Example Panel 2', 'panel2' );
echo "This is panel2";
echo $pane->endPanel();
echo $pane->startPanel( 'Example Panel 3', 'panel3' );
echo "This is panel3";
echo $pane->endPanel();
echo $pane->endPane();
If you check this line
$pane =& JPane::getInstance(‘tabs’, array(’startOffset’=>2));
here first parameter is about making tab, If you want to make slider then use like this
$pane =& JPane::getInstance(’sliders’, array(’startOffset’=>2));
startOffset should be 0 for normal uses. For quick access just check the file \jtest\libraries\joomla\html\pane.php (windows style path here
) for the api.
One problem is, if you want to use this tab/slider in front end u need to copy some css code from backend css file and it’s in administrator\templates\khepri\css\general.css from line 231 to line 288 and here is teh css code bellow that I found there.
/* pane-sliders */
.pane-sliders .title {
margin: 0;
padding: 2px;
color: #666;
cursor: pointer;
}
.pane-sliders .panel { border: 1px solid #ccc; margin-bottom: 3px;}
.pane-sliders .panel h3 { background: #f6f6f6; color: #666}
.pane-sliders .content { background: #f6f6f6; }
.pane-sliders .adminlist { border: 0 none; }
.pane-sliders .adminlist td { border: 0 none; }
.jpane-toggler span { background: transparent url(../images/j_arrow.png) 5px 50% no-repeat; padding-left: 20px;}
.jpane-toggler-down span { background: transparent url(../images/j_arrow_down.png) 5px 50% no-repeat; padding-left: 20px;}
.jpane-toggler-down { border-bottom: 1px solid #ccc; }
/* tabs */
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;
}
feeling boring ? heh heh.
I have made a tab/slidder module using Jpane and the above css code. It’s just and I named it “mod_simplejoomlatabslider”. If you are interested to check my module download from bellow and let me know. But pls keep in mind that, it’s just simple tab/slider module
Download
Simple joomla tab-slider Module (5.6 KiB, 5,590 hits)
Installation
- Download & install like any other joomla module
- Enabel this module to any module position
- Write module position name to load other modules as tab
- Publish other modules which u want to put in that above mentioned module position.
Check my screenshot of setting bellow:

thank guys
Oh here another screenshot of slider style of my module


