Joomla incluye mootools, un potente framework de Javascript.
Mootols nos permite hacer muchas cosas, pero es utilizado en Joomla para crear efectos secundarios. Algunos de ellos, como el efecto acordeón, es accesible a traves de las clases de Joomla.
En algunos casos tendremos que agregar manualmente la libreria mootools en el documento. La forma en como podemos hacerlo es usando el tipo behavior.mootools de JHTML, usando el siguiente código:
JHTML::_('behavior.mootools');'
JPane
Un panel es un área XHTML que tiene más de un conjunto de información. Hay dos tipos diferentes de paneles:
Tabs: tabs proporciona un área típica de pestañas con pestañas en la parte superior que se utilizan para seleccionar diferentes paneles.
Sliders: Sliders, basado en el acordeón mootools, con selecciones verticales de las cabeceras por encima de los paneles que pueden expandirse o contraerse.
Podemos usar la clase JPane para crear paneles.
Creando un panel del tipo Tabs:
Por ejemplo podriamos crear un panel del tipo 'Tabs' de la siguiente manera:
<?php
JHTML::_('behavior.mootools');
$panel =& JPANE::getInstance('Tabs');
echo $panel->startPane('mipanel');
echo $panel->startPanel('Panel Tabs 1','panel1');
echo "Este es el contendio del Panel Tabs 1";
echo $panel->endPanel();
echo $panel->startPanel('Panel Tabs 2','panel2');
echo "Este es el contenido del Panel Tabs 2";
echo $panel->endPanel();
echo $panel->endPane();
?>
Cuando invocamos el metodo startPane, le pasamos el nombre del panel como una cadena ( este nombre debe ser único).
En el método starPanel, pasamos como parámetro el título que contendrá el panel y el identificador único.
Luego debajo de la llamada al método startPanel, escribimos el contenido que aparecerá debajo del título, en este ejemplo "Este es el contendio del panel 1".
La salida del ejemplo anterior seria como la siguiente imagen:
*Noten que la primera linea del script llama a la librería mootools usando JHTML::_('behavior.mootools'); por si no se ha cargado antes.
Creando un panel del tipo Sliders:
Para crear un panel del tipo Sliders lo hacemos de la siguiente manera:
<?php
$panel =& JPANE::getInstance(Sliders);
echo $panel->startPane('mipanel');
echo $panel->startPanel('Panel Sliders 1','panel1');
echo "Este es el contenido del Panel Sliders 1";
echo $panel->endPanel();
echo $panel->startPanel('Panel Sliders 2','panel2');
echo "Este es el contenido del Panel Sliders 2";
echo $panel->endPanel();
echo $panel->endPane();
?>
Al igual que cuando creamos el panel del tipo tabs, cuando invocamos el metodo startPane, le pasamos el nombre del panel como una cadena ( este nombre debe ser único).
En el método starPanel, pasamos como parámetro el título que contendrá el panel y el identificador único.
Luego debajo de la llamada al método startPanel, escribimos el contenido que aparecerá debajo del título, en este ejemplo "Este es el contenido del Panel Sliders 1".
La salida del ejemplo anterior seria como la siguiente imagen
Por último le dejo los estilos CSS para cada unos de los paneles.
CSS para los paneles Tabs
<style type="text/css">
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;
}
</style>
CSS para los paneles Slider
<style type="text/css">
/* 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; }
/* pane-sliders */
</style>