Javascript Frameworks

From Joomla! Documentation

Revision as of 11:41, 1 December 2012 by Garyamort (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

The Joomla! CMS includes a number of Javascript Frameworks. This means instead of including your own Javascript code, you may use these pre-existing Javascript libraries of functions.

Frameworks are loaded using calls to static methods in the JHtml class.

The frameworks that come pre-installed with Joomla! include:

Twitter_Bootstrap_Javascript_Framework To enable the bootstrap framework, call JHtml::_('bootstrap'). This will automatically enable the Jquery framework in noConflict mode[ie accessed via jQuery. instead of $.] The bootstrap libary included is version 2.1.0 and is located at media/jui/bootstrap.js It includes alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab, typeahead, affix.

NOTE: there is a known incompatibility between bootstrap-button and jquery-ui-button. Using both on the same page can result in conflicts. See for a possible workaround.

JQuery_Javascript_Framework In order to load JQuery, use JHtml::_('jquery.framework'); This will load the Jquery version 1.8.1 library in no conflict mode. This means it is accessed via the jQuery namespace, not through $. To load it in normal mode, call JHtml::_('jquery.framework', false);

JQuery_UI_Framework The ui libraries include the core Jquery UI code plus Widget, Mouse, Position, and Sortable. In order to load the core call: JHtml::_('jquery.ui'); This will load the jquery-ui.core.js library containing Jquery UI version 1.8.23 including Widget, Mouse, and Position. Enabling JQuery-ui automatically enables JQuery in no conflict mode.

To add the Sortable library, use JHtml::_('jquery.ui', array('sortable'); This will automatically include the core JQuery UI library and the JQuery library.

To include other JQuery plugins, including JQuery UI plugins, you will need to call JHtml::_('script') along with the appropriate parameters in order to include them - or add your own JHtml library to enable autoloading.


  • needs review and completion*

The Joomla! Framework includes a number of convenience functions for use on the website including. These javascript libraries can be located under the media/system/js folder and include:

caption.js, to enable use JHtml::_('behavior.caption', $selector) This will apply the caption functions to all elements of the DOM who have the css class $selector. Default selector class is img.caption. In order to apply the caption function to multiple classes, simple make multiple calls to JHtml::_('behavior.caption', $selector). The library will only be loaded once, but it will be applied to all classes.

tooltip.js, to enable use JHtml::_('behavior.tooltip', $selector, $params) For all DOM objects with class $selector, an onhover tooltip will be created based on $params. Default selector is class 'hasTip' Loading this framework will also load the Mootools framework.

combobox.js, to enable use JHtml::_('behavior.combobox') Creates a combobox effect. Loading this framework will also load the Mootools framework.

validate.js, to enable use JHtml::_('behavior.formvalidation') Enabled form validation based on rules defined by the form fields. Loading this framework will also load the Mootools framework.

switcher.js, to enable use JHtml::_('behavior.switcher') Is used internally and unlikely to be useful to other components. When enabled, it also enables the Mootools framework.

Mootools_Javascript_Framework Loads the mootools libraries from system/js. JHtml::_('behavior.framework', $type) where $type defines which library Core: mootools-core.js, version 1.4.5 More: mootools-more.js, version, enabling more automatically enables core