jQuery and Bootstrap in Joomla 2.5

Joomla 3 has introduced native support of jQuery, Bootstrap, IcoMoon and LESS. In Joomla 2.5 there is still no standard for including jQuery and each developer adds it on his way. Also when you develop an extension for Joomla 2.5 and 3 then it has to load jQuery in a different way for each Joomla. To solve this problem with have made a system plugin for Joomla 2.5 which loads some libraries from Joomla 3 with native support for jQuery, Bootstrap and others User Interface features.

After activating plugin you can use well known methods from Joomla 3 in 2.5 with the same syntax.

Download Perfect Joomla! 3 User Interface plugin

 

jQuery

JHtml::_('jquery.framework');

jQuery UI

JHtml::_('jquery.ui');

 

Bootstrap JavaScript

JHtml::_('bootstrap.framework');

Bootstrap CSS

Load only one of required files

JHtml::_('stylesheet', 'jui/bootstrap.css', array(), true);
JHtml::_('stylesheet', 'jui/bootstrap-extended.css', array(), true);
JHtml::_('stylesheet', 'jui/bootstrap-responsive.css', array(), true);

or all of them

JHtml::_('bootstrap.loadCss', $includeMainCss, $direction, $attribs);

$includeMainCss - If true, main bootstrap.css files are loaded
$direction - rtl or ltr direction. If empty, ltr is assumed
$attribs - Optional array of attributes to be passed to JHtml::_('stylesheet')

 

IcoMoon

JHtml::_('stylesheet', 'jui/icomoon.css', array(), true);

 

Bootstrap plugins

Bootstrap Afix plugin

JHtml::_('bootstrap.affix', $selector, $options);

$selector - ID selector without trailing #
$options - associative array with options
Bootstrap Affix plugin documentation

Bootstrap Alert plugin

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

$selector - class selector without trailing dot
Bootstrap Alert plugin documentation

Bootstrap Button plugin

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

$selector - class selector without trailing dot
Bootstrap Button plugin documentation

Bootstrap Carousel plugin

JHtml::_('bootstrap.carousel', $selector, $options);

$selector - class selector without trailing dot
$options - associative array with options
Bootstrap Carousel plugin documentation

Bootstrap Dropdown plugin

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

$selector - class selector without trailing dot
Bootstrap Dropdown plugin documentation

Bootstrap Modal plugin

JHtml::_('bootstrap.modal', $selector, $options);

$selector - ID selector without trailing #
$options - associative array with options
Bootstrap Modal plugin documentation

Renders modal markup with IFrame

JHtml::_('bootstrap.renderModal', $selector, $options, $footer);

$selector - ID selector without trailing #
$options - associative array with options: title, url, width, height
$footer - optional markup for the modal footer

Bootstrap Popover plugin

JHtml::_('bootstrap.popover', $selector, $options);

$selector - css selector with trailing dot or #
$options - associative array with options
Bootstrap Popover plugin documentation

Bootstrap Scrollspy plugin

JHtml::_('bootstrap.scrollspy', $selector, $options);

$selector - ID selector without trailing #
$options - associative array with options
Bootstrap Scrollspy plugin documentation

Bootstrap Tooltip plugin

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

$selector - css selector with trailing dot or #
$options - associative array with options
Bootstrap Tooltip plugin documentation

Bootstrap Typeahead plugin

JHtml::_('bootstrap.typeahead', $selector, $options);

$selector - css selector with trailing dot or #
$options - associative array with options
Bootstrap Typeahead plugin documentation

Bootstrap Collapse/Accordion plugin

Add javascript support for Bootstrap accordians and insert the accordian

JHtml::_('bootstrap.startAccordion', $selector, $options);

$selector - Identifier of the accordion group, ID selector without trailing #
$options - associative array with plugin options: parent, toggle + active: sets the active slide during load
Bootstrap Collapse plugin documentation

Close the current accordion

JHtml::_('bootstrap.endAccordion');

Begins the display of a new accordion slide

JHtml::_('bootstrap.addSlide', $selector, $text, $id, $class);

$selector - identifier of the accordion group, the same as in bootstrap.startAccordion
$text - text which opens slide
$id - identifier of the slide, ID selector without trailing #
$class - optional class of the accordion group

Close the current slide

JHtml::_('bootstrap.endSlide');