Actions

J3.x

Difference between revisions of "Javascript Frameworks"

From Joomla! Documentation

(Created page with "{{version/tutor|3.0|alt=1.5,1.6,1.7,2.5|altlink=Javascript Frameworks|alttitle=these guides!}} The Joomla! CMS includes a number of Javascript Frameworks. This means instead...")
 
Line 1: Line 1:
 
{{version/tutor|3.0|alt=1.5,1.6,1.7,2.5|altlink=Javascript Frameworks|alttitle=these guides!}}
 
{{version/tutor|3.0|alt=1.5,1.6,1.7,2.5|altlink=Javascript Frameworks|alttitle=these guides!}}
  
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.
+
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.
  
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 ===
 
+
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 $.]
 
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  
 
The bootstrap libary included is version 2.1.0 and is located at media/jui/bootstrap.js  
Line 14: Line 11:
 
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.
 
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.
  
JQuery_Javascript_Framework
+
=== 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);
 
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
+
=== 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:
 
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.
 
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.
Line 25: Line 22:
 
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.
 
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.
  
Joomla!_Javascript_Framework
+
 
*needs review and completion*
+
=== Mootools_Javascript_Framework ===
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:
+
''It is assumed that this framework is depreciated and may be removed in future versions''
 +
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 ===
 +
''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 and include:
  
 
caption.js, to enable use JHtml::_('behavior.caption', $selector)
 
caption.js, to enable use JHtml::_('behavior.caption', $selector)
Line 44: Line 49:
 
switcher.js, to enable use JHtml::_('behavior.switcher')
 
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.
 
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 1.4.0.1, enabling more automatically enables core
 
  
 
{{stub}}
 
{{stub}}

Revision as of 11:46, 1 December 2012

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.


Contents

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 https://gist.github.com/4177778 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.


Mootools_Javascript_Framework

It is assumed that this framework is depreciated and may be removed in future versions 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

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 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.