Difference between revisions of "Javascript Frameworks"

Latest revision as of 08:01, 8 June 2020

Other languages:

English • ‎español • ‎français • ‎русский • ‎中文（台灣）‎

This tutorial is for Joomla! CMS Version(s)

→ For a

tutorial, see:- these guides!

The Joomla! CMS includes a number of JavaScript Frameworks. 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.

Twitter Bootstrap JavaScript Framework[edit]

To enable the Bootstrap framework, call JHtml::_('bootstrap.framework'). This will automatically enable the jQuery framework in noConflict mode (i.e. accessed via jQuery. instead of $.). The Bootstrap library included is version 2.1.0 and is located at media/jui/bootstrap.js. It includes methods to initialize the Bootstrap affix, alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab and typeahead plugins.

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

jQuery JavaScript Framework[edit]

In order to load jQuery, use JHtml::_('jquery.framework');

This will load the jQuery version 1.12.4 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[edit]

The JUX libraries include the core jQuery UI code plus Widget, Mouse, Position, and Sortable (version 1.8.23 as of Joomla 3.0.2). Please review the jQuery-UI documentation for further details on their usage.

In order to load the core call: JHtml::_('jquery.ui');

This will load the appropriate jquery-ui.core.js from the media/jui directory. Enabling jQuery UI automatically enables jQuery in noConflict mode if it has not already been done.

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

For clarity, it is best to explicitly enable both the core and sortable from a single call using JHtml::_('jquery.ui', array('core', 'sortable'));

As of Joomla 3.0.2, only jQuery UI Core and Sortable are installed/available. To use other jQuery plugins, including jQuery UI plugins, you will need to make sure they are installed with your application and call JHtml::_('script') along with the appropriate parameters to load them. Alternatively, you may create and install your own JHtml extensions and create your own JHtml calls - such as JHtml::_('mylibrary.myloader')

Mootools JavaScript Framework[edit]

This framework is deprecated and will be removed in Joomla 4.

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 1.4.0.1, enabling more automatically enables core

Joomla! JavaScript Framework[edit]

Many of the Joomla libraries require the Mootools framework. It is assumed that these will be migrated to the Bootstrap framework in some future version.

These JavaScript libraries can be located under the media/system/js folder. This list is incomplete, please check the folder for available libraries. Libraries include:

caption.js :: JHtml::_('behavior.caption', $selector)

This will apply the caption functions to all elements of the DOM that have the CSS class $selector. Default selector class is img.caption. In order to apply the caption function to multiple classes, simply 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 :: JHtml::_('behavior.tooltip', $selector, $params)

For all DOM objects with class $selector, an onhover tooltip will be created based on $params. The default selector is class hasTip. Loading this framework will also load the Mootools framework.

combobox.js :: JHtml::_('behavior.combobox')

Creates a combobox effect. Loading this framework will also load the Mootools framework.

validate.js :: JHtml::_('behavior.formvalidation')

Enables form validation based on rules defined by the form fields. Loading this framework will also load the Mootools framework.

switcher.js :: JHtml::_('behavior.switcher')

This library is used internally and unlikely to be useful to other components. When enabled, it also enables the Mootools framework.

multiselect.js :: JHtml::_('behavior.multiselect')

JavaScript behavior to allow shift select in grids. Loading this framework will also load the Mootools framework.

swf.js :: JHtml::_('behavior.uploader')

progressbar.js :: JHtml::_('behavior.uploader')

uploader.js :: JHtml::_('behavior.uploader')

Add unobtrusive JavaScript support for the advanced uploader.

mootree.js :: JHtml::_('behavior.tree')

Add unobtrusive JavaScript support for a collapsible tree.

No files JHtml::_('behavior.keepalive') - Keep session alive, for example, while editing or creating an article.

No files JHtml::_('behavior.noframes') - Break us out of any containing iframes.

@@ Line 1: / Line 1: @@
-{{version/tutor|3.0|alt=1.5,1.6,1.7,2.5|altlink=Javascript Frameworks|alttitle=these guides!}}
+<noinclude><languages /></noinclude>
-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.
+{{version/tutor|3.x|alt=1.5,2.5|altlink=Adding JavaScript|alttitle=these guides!}}
+<translate>
+<!--T:1-->
+The Joomla! CMS includes a number of JavaScript Frameworks. 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 <code>JHtml</code> class.
+</translate>
-=== Twitter_Bootstrap_Javascript_Framework ===
+<translate>
-To enable the bootstrap framework, call JHtml::_('bootstrap.framework').  This will automatically enable the Jquery framework in noConflict mode[ie accessed via jQuery. instead of $.]
+== Twitter Bootstrap JavaScript Framework == <!--T:2-->
-The bootstrap libary included is version 2.1.0 and is located at media/jui/bootstrap.js
+</translate>
-It includes methods to initialize the Bootstrap alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab, typeahead, and affix plugins.
+<translate>
+<!--T:3-->
+To enable the [http://twitter.github.com/bootstrap/ Bootstrap framework], call <code>JHtml::_('bootstrap.framework')</code>. This will automatically enable the jQuery framework in noConflict mode (i.e. accessed via <code>jQuery.</code> instead of <code>$.</code>).
+The Bootstrap library included is version 2.1.0 and is located at <code>media/jui/bootstrap.js</code>.
+It includes methods to initialize the Bootstrap affix, alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab and typeahead  plugins.
+</translate>
-NOTE: there is a known incompatibility between bootstrap-button and jquery-ui-button.  Using both on the same page can result in conflicts.  See https://gist.github.com/4177778 for a possible workaround.
+<translate>
+<!--T:4-->
+NOTE: There is a known incompatibility between <code>bootstrap-button</code> and <code>jquery-ui-button</code>. Using both on the same page can result in conflicts. See [https://gist.github.com/4177778] for a possible workaround.
+</translate>
-=== JQuery_Javascript_Framework ===
+<translate>
-In order to load JQuery, use '''JHtml::_('jquery.framework');'''
+== jQuery JavaScript Framework == <!--T:5-->
+In order to load jQuery, use <code>JHtml::_('jquery.framework');</code>
-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 $.
+This will load the jQuery version 1.12.4 library in '''no conflict''' mode. This means it is accessed via the <code>jQuery</code> namespace, not through <code>$</code>.
-To load it in normal mode, call JHtml::_('jquery.framework', false);
+<!--T:6-->
+To load it in normal mode, call <code>JHtml::_('jquery.framework', false);</code>
+</translate>
-=== JQuery_UI_Framework ===
+<translate>
-The JUX libraries include the core jQuery UI code plus Widget, Mouse, Position, and Sortable(version 1.8.23 as of Joomla 3.0.2). Please review the JQuery-UI documentation for further details on their usage.
-In order to load the core call: ''JHtml::_('jquery.ui');''
+== jQuery UI Framework == <!--T:7-->
+The JUX libraries include the core [http://jqueryui.com/ jQuery UI] code plus Widget, Mouse, Position, and Sortable (version 1.8.23 as of Joomla 3.0.2). Please review the [http://api.jqueryui.com/ jQuery-UI documentation] for further details on their usage.
+</translate>
-This will load the appropriate jquery-ui.core.js from the media/jui directory.  Enabling jQuery UI automatically enables JQuery in no conflict mode if it has not already been done..
+<translate>
+<!--T:8-->
+In order to load the core call: <code>JHtml::_('jquery.ui');</code>
-To add the Sortable library, use ''JHtml::_('jquery.ui', array('sortable');''
+<!--T:9-->
-This will automatically include the core JQuery UI library and the JQuery library.
+This will load the appropriate <code>jquery-ui.core.js</code> from the <code>media/jui</code> directory. Enabling jQuery UI automatically enables jQuery in noConflict mode if it has not already been done.
+</translate>
-For clarity, it is best to explictly enable both the core and sortable from a single call using ''JHtml::_('jquery.ui' array('core', 'sortable');''
+<translate>
+<!--T:10-->
+To add the Sortable library, use <code>JHtml::_('jquery.ui', array('sortable'));</code>
+This will automatically include the core jQuery UI library and the jQuery library.
-As of Joomla 3.0.2, only jQuery UI Core and Sortable are installed/available. To use other jQuery plugins, including jQuery UI plugins, you will need to make sure they are installed with your application and call ''JHtml::_('script')'' along with the appropriate parameters to load them.  Alternatively, you may create and install your own JHtml extensions and create your own JHtml calls - such as JHtml::_('mylibrary.myloader')
+<!--T:11-->
+For clarity, it is best to explicitly enable both the core and sortable from a single call using <code>JHtml::_('jquery.ui', array('core', 'sortable'));</code>
+</translate>
-=== Mootools_Javascript_Framework ===
+<translate>
-''It is assumed that this framework is deprecated and may be removed in future versions''
+<!--T:12-->
-Loads the mootools libraries from system/js.  JHtml::_('behavior.framework', $type) where $type defines which library
+As of Joomla 3.0.2, only jQuery UI Core and Sortable are installed/available. To use other jQuery plugins, including jQuery UI plugins, you will need to make sure they are installed with your application and call <code>JHtml::_('script')</code> along with the appropriate parameters to load them. Alternatively, you may create and install your own JHtml extensions and create your own JHtml calls - such as <code>JHtml::_('mylibrary.myloader')</code>
-Core: mootools-core.js, version 1.4.5
+</translate>
-More: mootools-more.js, version 1.4.0.1, enabling more automatically enables core
-=== Joomla!_Javascript_Framework ===
+<translate>
-''Many of the Joomla libraries require the Mootools framework, it is assumed that these will be migrated to the Bootstrap framework in some future version''
+== Mootools JavaScript Framework == <!--T:13-->
-These javascript libraries can be located under the media/system/js folder and include:
+''This framework is deprecated and will be removed in Joomla 4.''
-caption.js, to enable use JHtml::_('behavior.caption', $selector)
+<!--T:14-->
-This will apply the caption functions to all elements of the DOM who have the css class $selector.  Default selector class is img.caption.
+Loads the Mootools libraries from <code>system/js</code>. <code>JHtml::_('behavior.framework', $type)</code> where <code>$type</code> defines which library.
-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)
+<!--T:15-->
-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.
+Core: <code>mootools-core.js</code>, version 1.4.5
+More: <code>mootools-more.js</code>, version 1.4.0.1, enabling more automatically enables core
+</translate>
-combobox.js, to enable use JHtml::_('behavior.combobox')
+<translate>
-Creates a combobox effect.  Loading this framework will also load the Mootools framework.
-validate.js, to enable use JHtml::_('behavior.formvalidation')
+== Joomla! JavaScript Framework == <!--T:16-->
-Enabled form validation based on rules defined by the form fields.  Loading this framework will also load the Mootools framework.
+''Many of the Joomla libraries require the Mootools framework. It is assumed that these will be migrated to the Bootstrap framework in some future version.''
+</translate>
-switcher.js, to enable use JHtml::_('behavior.switcher')
+<translate>
-Is used internally and unlikely to be useful to other components.  When enabled, it also enables the Mootools framework.
+<!--T:17-->
+These JavaScript libraries can be located under the <code>media/system/js</code> folder. This list is incomplete, please check the folder for available libraries. Libraries include:
+</translate>
-{{stub}}
+'''caption.js''' :: <code>JHtml::_('behavior.caption', $selector)</code>
+<translate>
+<!--T:18-->
+This will apply the caption functions to all elements of the DOM that have the CSS class <code>$selector</code>. Default selector class is <code>img.caption</code>.
+In order to apply the caption function to multiple classes, simply make multiple calls to <code>JHtml::_('behavior.caption', $selector)</code>. The library will only be loaded once, but it will be applied to all classes.
+</translate>
+'''tooltip.js''' :: <code>JHtml::_('behavior.tooltip', $selector, $params)</code>
+<translate>
+<!--T:19-->
+For all DOM objects with class <code>$selector</code>, an onhover tooltip will be created based on <code>$params</code>. The default selector is class <code>hasTip</code>. Loading this framework will also load the Mootools framework.
+</translate>
+'''combobox.js''' :: <code>JHtml::_('behavior.combobox')</code>
+<translate>
+<!--T:20-->
+Creates a combobox effect. Loading this framework will also load the Mootools framework.
+</translate>
+'''validate.js''' :: <code>JHtml::_('behavior.formvalidation')</code>
+<translate>
+<!--T:21-->
+Enables form validation based on rules defined by the form fields. Loading this framework will also load the Mootools framework.
+</translate>
+'''switcher.js''' :: <code>JHtml::_('behavior.switcher')</code>
+<translate>
+<!--T:22-->
+This library is used internally and unlikely to be useful to other components. When enabled, it also enables the Mootools framework.
+</translate>
+'''multiselect.js''' :: <code>JHtml::_('behavior.multiselect')</code>
+<translate>
+<!--T:23-->
+JavaScript behavior to allow shift select in grids. Loading this framework will also load the Mootools framework.
+</translate>
+'''swf.js''' :: <code>JHtml::_('behavior.uploader')</code>
+'''progressbar.js''' :: <code>JHtml::_('behavior.uploader')</code>
+'''uploader.js''' :: <code>JHtml::_('behavior.uploader')</code>
+<translate>
+<!--T:24-->
+Add unobtrusive JavaScript support for the advanced uploader.
+</translate>
+'''mootree.js''' :: <code>JHtml::_('behavior.tree')</code>
+<translate>
+<!--T:25-->
+Add unobtrusive JavaScript support for a collapsible tree.
+<!--T:26-->
+No files <code>JHtml::_('behavior.keepalive')</code> - Keep session alive, for example, while editing or creating an article.
+<!--T:27-->
+No files <code>JHtml::_('behavior.noframes')</code> - Break us out of any containing iframes.
+</translate>
+<translate>
+<!--T:28-->
+[[Category:Development]]
+[[Category:JavaScript]]
+</translate>

J3.x