Frameworks JavaScript
From Joomla! Documentation
Le CMS Joomla! comprend un certain nombre de Frameworks JavaScript. Au lieu d'inclure votre propre code JavaScript, vous pouvez utiliser ces bibliothèques et fonctions JavaScript pré-existantes. Les frameworks sont chargés à l'aide d'appels de méthodes statiques dans la classe JHtml
.
Le Framework JavaScript Twitter Bootstrap
Pour activer le framework Bootstrap, il suffit d'appeler JHtml::_('bootstrap.framework')
. Ceci activera automatiquement le framework jQuery en mode 'sans conflit' (ex : accessible via jQuery.
au lieu de $.
).
La bibliothèque Bootstrap intégrée est la version 2.1.0 et se trouve dans media/jui/bootstrap.js
.
Elle intègre les méthodes permettant l'initialisation des plugins Bootstrap pour les affixes, alertes, boutons, carrousels, masquages, listes déroulantes, fenêtres modales, info-bulles, boîtes de dialogues, défilement espion, onglets, en-têtes...
REMARQUE : Il existe une incompatibilité connue entre bootstrap-button
et jquery-ui-button
. Utiliser les deux en même temps sur la même page peut générer des conflits. Vous pouvez consulter [1] pour une possible solution de contournement.
Framework JavaScript jQuery
Pour le chargement de jQuery, utilisez JHtml::_('jquery.framework');
Cela vous permettra de charger la version 1.12.4 de la bibliothèque jQuery en mode sans conflit. Cela signifie qu'il est accessible via l'espace de nommage jQuery
, et non par $
.
Pour le charger en mode normal, appelez : JHtml::_('jquery.framework', false);
.
Framework jQuery UI
Les bibliothèques JUX intégrées dans le code du noyau jQuery UI ainsi que les widgets, souris, positions et sorties (version 1.8.23 depuis Joomla! 3.0.2). Veuillez consulter la documentation jQuery-UI pour plus de détails sur leur utilisation.
Voici l'appel pour charger le noyau : JHtml::_('jquery.ui');
Cela vous permettra de charger jquery-ui.core.js
depuis le répertoire media/jui
. L'activation automatique de jQuery UI se fera en mode 'sans conflit' si cela ne l'a pas déjà été fait par ailleurs.
Pour ajouter la bibliothèque 'Sortable', vous pouvez utiliser : JHtml::_('jquery.ui', array('sortable'));
Cela va intégrer automatiquement la bibliothèque du noyau jQuery UI et la bibliothèque jQuery.
Pour plus de clarté, il est préférable d'activer explicitement à la fois la bibliothèque du noyau et 'sortable' à partir d'un seul appel à l'aide de JHtml::_('jquery.ui', array('core', 'sortable'));
Depuis Joomla! 3.0.2, uniquement le noyau jQuery UI ainsi que Sortable sont installés et disponibles. Pour utiliser d'autres plugins jQuery, comme les plugins jQuery UI, vous devrez vous assurer qu'ils sont installés et les appeler par : JHtml::_('script')
avec les paramètres de chargement appropriés. De façon alternative, vous pouvez créer et installer vos propres extensions JHtml et créer vos propres appels JHtml comme : JHtml::_('mylibrary.myloader')
Framework JavaScript Mootools
Ce framework est considéré comme étant obsolète et sera supprimé dans les futures versions.
Vous pouvez charger la bibliothèque Mootools depuis system/js
.
JHtml::_('behavior.framework', $type)
où $type
définit la bibliothèque.
Noyau : mootools-core.js
, version 1.4.5
Plus : mootools-more.js
, version 1.4.0.1, permettant d'activer automatiquement le noyau.
Framework JavaScript Joomla!
Un grand nombre des bibliothèques Joomla! nécessite l'utilisation du framework Mootools. Il est prévu que ces bibliothèques soient migrées vers le framework Bootstrap dans une version future.
Ces bibliothèques JavaScript se trouvent dans le répertoire : media/system/js
. Cette liste est incomplète, veuillez vérifier ce dossier pour connaitre les bibliothèques disponibles.
Les bibliothèques intégrées sont notamment :
caption.js :: JHtml::_('behavior.caption', $selector)
Ceci permettra d'appliquer les fonctions de légendes à tous les éléments du DOM qui ont pour classe CSS $selector
.
La classe selector par défaut est img.caption
.
Afin d'appliquer la fonction de légendes à plusieurs classes, il suffit de faire plusieurs appels à JHtml::_('behavior.caption', $selector)
. La bibliothèque ne sera chargée qu'une seule fois, mais elle sera appliquée à toutes les classes.
tooltip.js :: JHtml::_('behavior.tooltip', $selector, $params)
Pour tous les objets DOM avec la classe $selector
, une infobulle en survol sera créée basée sur $params
. La classe de selector par défaut est hasTip
. Le chargement de ce framework provoquera également le chargement du framework Mootools.
combobox.js :: JHtml::_('behavior.combobox')
Permet la création d'un effet de liste déroulante. Le chargement de ce framework provoquera également le chargement du framework Mootools.
validate.js :: JHtml::_('behavior.formvalidation')
Permet d'activer la validation d'un formulaire en fonction de règles définies par les champs de formulaire. Le chargement de ce framework provoquera également le chargement du framework Mootools.
switcher.js :: JHtml::_('behavior.switcher')
Cette bibliothèque est utilisée en interne et à peu de chances d'être utile à d'autres composants. Lorsqu'elle est activée, elle permet également d'activer le framework Mootools.
multiselect.js :: JHtml::_('behavior.multiselect')
Comportement JavaScript qui permet la sélection de changements dans les grilles. Le chargement de ce framework provoquera également le chargement du framework Mootools.
swf.js :: JHtml::_('behavior.uploader')
progressbar.js :: JHtml::_('behavior.uploader')
uploader.js :: JHtml::_('behavior.uploader')
Ajoute une aide JavaScript à l'interface avancée.
mootree.js :: JHtml::_('behavior.tree')
Ajoute une aide JavaScript à une arborescence.
JHtml::_('behavior.keepalive')
permet de conserver une session ouverte comme par exemple lors de la modification ou de la création d'un article.
JHtml::_('behavior.noframes')
permet d'isoler de tout contenant iframes.