A Bootstrap Jhtml library for Joomla 3.0

Details

Created on Thursday, 26 July 2012 14:40

Written by Dave Horsfall

Many people will be aware that Kyle Ledbetter has been working extremely hard over the last few months looking at the User Interface for Joomla 3.0 and the ways that we can make it more modern, consistent and usable. It has been decided that Joomla 3.0 will integrate with Bootstrap.

I have been working on a Bootstrap extension for the Jhtml library that will allow developers to insert tooltips, accordions and tabs in much the same way as the current Joomla framework.

The library file

Download the bootstrap.php file here, and place it in the Jhtml directory, in the core Joomla library:

/libraries/joomla/html/html/bootstrap.php

Usage

Firstly, we must import the Joomla library file:

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

Tooltips

To start, you must activate the tooltip behavior. This is done with the following line of code:

JHtml::_('bootstrap.loadtooltip', 'content', array());

Here, 'content' is the ID of the element in which you want to activate tooltips, and array() is an array of options (see function header for full set of options).

The following is a basic tooltip.

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

Output looks like this.

The following is a tooltip which links to Google.

echo JHtml::_('bootstrap.tooltip', 'This is the text which will load the tooltip', 'This is the tooltip text', 'http://google.co.uk');

The following is an image tooltip which links to Google.

echo JHtml::_('bootstrap.tooltip', JHTML::_('image', 'http://hwdmediashare.co.uk/images/resources/hwdmediashare-logo-64.png', 'logo'), 'W00T!', 'http://google.co.uk');

Output looks like this.

Accordion

The following is an accordion, which loads with the second slide open.

// Example accordion usage
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');

Output looks like this.

Tabs

The following is a tab pane, which loads with the first tab open.

?>
<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 
// Example tab usage
echo JHtml::_('bootstrap.startPane', 'myTab', array('active' => 'home'));
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');
?>

Output looks like this.

A note about tabs...

Bootstrap tabs consist of a tab element and content container. These are independent. You will see from the above example that the Bootstrap library only has methods to insert the content container. I have tried a number of different approaches to this, including separate methods for both the tab element and the content container and also a solution which automatically generated the tab container. I'm still not completely happy, and feedback is welcome.