VirtueMart – интернет-магазин на Joomla. Часть 24. Добавление mootools-вкладок для VirtueMart.

<?php

 //Говорим Joomla, что мы хотим использовать панели
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
 $output = '';
 
//Создаем панель для вкладок
$output .= $myTabs->startPane( 'pane' );

 //Создаем 1 вкладку
$output .= $myTabs->startPanel( '1st', 'tab1' );
$output  .= '<p>Это первая вкладка</p>';
$output .= $myTabs->endPanel();

// Создаем 2 вкладку
$output .= $myTabs->startPanel( '2nd', 'tab2' );
$output  .= '<p>Это вторая вкладка</p>';
$output .= $myTabs->endPanel();

// Создаем 3 вкладку
$output .= $myTabs->startPanel( '3rd', 'tab3' );
$output  .= '<p>Это третья вкладка</p>';
$output .= $myTabs->endPanel();
 
//окончание панели
$output .= $myTabs->endPane();
//Выводим
echo $output;
?>

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

<!--[if IE]>
<link href="/baseurl?>/templates/template?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->

div.current { overflow:auto; }
div.current dd  { float:left; }

    <?php
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';
$output .= $myTabs->startPane( 'pane' );

//1 вкладка
$output .= $myTabs->startPanel( '<span>Описание</span>', 'tab1' ); // добавляем вкладку с заголовком «Описание»
    $output  .= '<div >'.$product_description.'</div>'; // выводим в контейнер под вкладкой описание товара из переменной $product_description
$output .= $myTabs->endPanel();

    //2 вкладка
$output .= $myTabs->startPanel( '<span>Отзывы</span>', 'tab2' ); // добавляем вкладку с заголовком «отзывы»
$output  .= '<div >'.$product_reviews.'<br>'.$product_reviewform.'</div>'; // выводим в контейнер под вкладкой отзывы о товаре из переменной $product_reviews и форму добавления отзывов из переменной $product_reviewform
$output .= $myTabs->endPanel();

//3 вкладка
$output .= $myTabs->startPanel( '<span>Дополнительные изображения</span>', 'tab3' ); // добавляем вкладку с заголовком «Дополнительные изображения»
$output .= '<div class="thumbnailListContainer" ><h5>'.$VM_LANG->_('PHPSHOP_MORE_IMAGES').' </h5> '.$this->vmListAdditionalImages( $product_id, $images ).' </div>'; ; // выводим в контейнер под вкладкой дополнительные изображения товара
$output .= $myTabs->endPanel();

$output .= $myTabs->endPane();
echo $output;

?>