Использование встроенных javascript эффектов в Joomla. Часть 1.

Joomla! включает в себя мощную библиотеку MooTools, написанную на JavaScript. Mootools дает нам возможность делать многие вещи, и он широко используется в Joomla! для создавания эффектов на стороне клиента. Некоторые из них, такие, как аккордеон, доступны
В некоторых случаях может потребоваться вручную добавить mootools библиотеки. Мы можем сделать это, используя следующую команду:

JHTML::_('behavior.mootools');

JPane

Класс панелей позволяет разделять источник информации на несколько слоев. Существует два различных вида панелей:
- Вкладки
- Слайдеры. На этом эффекте основан знаменитый "аккордеон".

Этот пример демонстрирует создание панелей в виде вкладок:

 
jimport('joomla.html.pane');
$pane =& JPane::getInstance('Tabs');
echo $pane->startPane('myPane');
{
echo $pane->startPanel('Panel 1', 'panel1');
echo "This is Panel 1";
echo $pane->endPanel();
echo $pane->startPanel('Panel 2', 'panel2');
echo "This is Panel 2";
echo $pane->endPanel();
}
echo $pane->endPane();
 

Есть по существу два элемента на панели: сама панель (Pane) и группы внутри панели (Panel). Мы используем методы startPane() и endPane() для обозначения начала и конца панели. Когда мы используем startPane() мы должны написать один строковый параметр, который представляет собой уникальный идентификатор панели.
Внутри панели всегда создаются группы с помощью методов startPanel() и endPanel(). Мы должны написать в startPanel() два параметрама: имя, которое отображается на вкладке панели и ID.
Вот скриншот, отображающий приведенный выше пример:


Если бы мы захотели создать аккордеон вместо вкладок, то в методе getInstance(), мы должны поставить параметр Sliders вместо Tabs. Это иллюстрация одной и той же панели, только в виде аккордеона:

Очень широко вкладки и аккордеон используется при настройке различных параметров в Joomla. Если вы хотите использовать эти элементы во фронт части, то должны добавить такие стили (я взял их из админки):

 
/* 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;
}
 

Не забудьте также откопировать картинки j_arrow_down.png и j_arrow.png, и прописать к ним верный путь. Они отображают закрытую и открытую вкладку аккордеона.