Bootstrap JHtml библиотека для Joomla 3.0

Большинство из вас уже знают о том, что Kyle Ledbetter в последние месяцы усиленно работает над пользовательским интерфейсом Joomla 3.0, и пытается достичь того, чтобы интерфейс CMS выглядел более современно и был более стабильным и удобным.

Я же (Dave Horsfall - прим.пер.) работаю над Bootstrap расширением для библиотеки JHtml, которое позволит разработчикам вставлять тултипы, аккордеоны и табы так же, как и в текущем фреймворке Joomla.

Файл библиотеки

Скачайте файл bootstrap.php (ссылка в конце статьи) и поместите его в директорию JHtml (в основную библиотеку Joomla):
/libraries/joomla/html/html/bootstrap.php .

Расположение файла класса на момент версии 3.10 /libraries/cms/html/bootstrap.php - неймётся им библиотеки перетаскивать с места на место.
В той же библиотеке находятся остальные методы расширяющие JHtml::_(), та что загляните в /libraries/joomla/html/ - много интересного найдёте... 😝

Использование

Сначала мы должны подключить файл библиотеки:

jimport('joomla.html.html.bootstrap');

Всплывающие подсказки.

Для начала вы должны активизировать использование подсказок. Примените следующий код:

JHtml::_('bootstrap.tooltip', $selector, $params);

Здесь $selector - это ID того элемента, в котором вы хотите активизировать подсказки, а $params - это массив с опциями (полный список опций вы найдете в заголовке функции).

Ниже представлен базовый вариант всплывающей подсказки:

echo JHtml::_('bootstrap.tooltip', 'This is the text which will load the tooltip', 'This is the tooltip text');

Результат:

<span class="hasTooltip" title="This is the tooltip text">This is the text which will load the tooltip</span>

Вот так это будет выглядеть:
bootstrap-jhtml-biblioteka-dlya-joomla-3-0-1
Вот так будет выглядеть подсказка, которая залинкован на Google:

echo JHtml::_(    
                'bootstrap.tooltip', 
                'This is the text which will load the tooltip', 
                'This is the tooltip text', 
                '<a href="http://google.co.uk" rel="nofollow" target="_blank" >http://google.co.uk'</a>
                );

А так будет выглядеть картинка с подсказкой, которая залинкована на Google:

echo JHtml::_(
        'bootstrap.tooltip', 
        JHtml::_(
               'image', 
               '<a href="http://hwdmediashare.co.uk/images/resources/hwdmediashare-logo-64.png" 
                   rel="nofollow" target="_blank" >
                   http://hwdmediashare.co.uk/images/resources/hwdmediashare-logo-64.png'
               </a>, 
               'logo'
           ), 
           'W00T!', 
           '<a href="http://google.co.uk" rel="nofollow" target="_blank" >http://google.co.uk'</a>
    );

bootstrap-jhtml-biblioteka-dlya-joomla-3-0-2

Аккордеон

Аккордеон, который загружается с открытым вторым слайдом:

echo JHtml::_('bootstrap.startAccordion', 'slide-example', array('active' => 'slide2'));
echo JHtml::_('bootstrap.addSlide', 'slide-example', JText::_('Slide 1'), 'slide1');
echo "Content of slide 1";
echo JHtml::_('bootstrap.endSlide');
echo JHtml::_('bootstrap.addSlide', 'slide-example', JText::_('Slide 2'), 'slide2');
echo "Content of slide 2";
echo JHtml::_('bootstrap.endSlide');
echo JHtml::_('bootstrap.addSlide', 'slide-example', JText::_('Slide 3'), 'slide3');
echo "Content of slide 3";
echo JHtml::_('bootstrap.endSlide');
echo JHtml::_('bootstrap.addSlide', 'slide-example', JText::_('Slide 4'), 'slide4');
echo "Content of slide 4";
echo JHtml::_('bootstrap.endSlide');
echo JHtml::_('bootstrap.endAccordion');

Это будет выглядеть вот так:

bootstrap-jhtml-biblioteka-dlya-joomla-3-0-3

Табы

Табы, которые загружаются с открытым вторым табом:

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-toggle="tab" href="#home">Tab 1</a></li>
    <li><a data-toggle="tab" href="#profile">Tab 2</a></li>
</ul>
<?php
echo JHtml::_('bootstrap.startPane', 'myTab', array('active' => 'profile'));
echo JHtml::_('bootstrap.addPanel', 'myTab', 'home');
echo "Content of tab 1";
echo JHtml::_('bootstrap.endPanel');
echo JHtml::_('bootstrap.addPanel', 'myTab', 'profile');
echo "Content of tab 2";
echo JHtml::_('bootstrap.endPanel');
echo JHtml::_('bootstrap.endPane', 'myTab');
?>

Вот как это будет выглядеть:
bootstrap-jhtml-biblioteka-dlya-joomla-3-0-4
Надеемся, что данная информация пригодится вам в работе с Joomla 3.

Оригинальная статья: Dave Horsfall