Подключение Javascript-фреймворков в Joomla 3

Twitter Bootstrap

Для подключения фреймворка Bootstrap используйте:

JHtml::_('bootstrap.framework')

Это также автоматически подключит фреймворк jQuery в режиме no conflict. Это означает, что работа должна осуществляться через пространство имен jQuery, а не через $. Подключаемая версия библиотеки Bootstrap 2.3.2, и она расположена в /media/jui/js/bootstrap.js. Включает в себя методы для инициализации следующих плагинов: alert, button, carousel, collapse, dropdown, modal, tooltip, popover, scrollspy, tab, typeahead и affix. Подробнее об использовании Boostrap в Joomla 3 в статье "Bootstrap JHtml библиотека для Joomla 3.0".

Примечание: существует известная несовместимость между bootstrap-button и jquery-ui-button. Использование обоих кнопок на одной и той же странице приведет к конфликту. Смотрите https://gist.github.com/4177778 для возможного разрешения проблемы. Решение описенно в этой статье.

jQuery

Для того чтобы подключить jQuery, используйте:

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

Это загрузит библиотеку jQuery версии 1.10.2 в режиме no conflict. Для загрузки в нормальном режиме, используйте:

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

jQuery UI

Библиотека JUX (Joomla User Experience) включает в себя ядро jQuery UI Core (версия 1.9.2 на момент Joomla 3.2.1) плюс Widget, Mouse, Position, а также плагин Sortable. Документацию по использованию вы можете найти на странице jQuery UI. Для загрузки ядра используйте:

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

Это загрузит jquery-ui.core.js из директории /media/jui/js/. Включение jQuery UI автоматически включает JQuery в режиме no conflict, если это не было сделано ранее.

Для добавления библиотеки Sortable используйте:

JHtml::_('jquery.ui', array('sortable'));

Это автоматически загрузит ядро jQuery UI и библиотеку jQuery. Для прозрачности кода, лучше всего подключать эти две библиотеки через один вызов:

JHtml::_('jquery.ui', array('core', 'sortable'));

MooTools

Предполагается, что этот фреймворк будет исключен из будущих версий Joomla.

Вызов фреймворка:

JHtml::_('behavior.framework', $type)

Где $type определяет тип (по умолчанию core). Загружает библиотеку MooTools из /media/system/js. Core: mootools-core.js, версия 1.4.5. More: mootools-more.js, версия 1.4.0.1. Подключение more автоматически включает core.

Joomla! Javascript Framework

Множество библиотек Joomla требуют фреймворк MooTools. Предполагается, что они будут мигрированы в фреймворк Bootstrap в будущих версиях Joomla.

Эти javascript библиотеки расположены в папке /media/system/js. Вот некоторые из них:

caption.js

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

Применит функцию подписи (caption) ко всем элементам с классом $selector. По умолчанию классом селектора является img.caption. Для того чтобы применить его к нескольким классам просто вызовите JHtml::_('behavior.caption', $selector) несколько раз. Библиотека загрузится единожды, но будет применена ко всем указанным классам.

tooltip.js

JHtml::_('behavior.tooltip', $selector, $params)

Для всех DOM объектов с классом $selector будет создан onhover тултип с необходимыми параметрами $params. По умолчанию классом селектора является 'hasTip'. Подключение этой библиотеки загрузит фреймворк MooTools.

combobox.js

JHtml::_('behavior.combobox')

Создает эффект combobox (поле со списком). Подключение этой библиотеки загрузит фреймворк MooTools.

validate.js

JHtml::_('behavior.formvalidation')

Включает валидацию формы, которая основана на правилах, которые определены полями формы. Подключение этой библиотеки загрузит фреймворк MooTools.

Плагины для фреймворков и собственные библиотеки

Для подключения сторонних плагинов и/или своих библиотек используйте JHtml::_('script') с необходимыми параметрами. Например:

JHtml::_('jquery.ui');
JHtml::script('com_mycomp/jqueryplugin.js', false, true);

Это подключит библиотеку jQuery (если она не была подключена ранее) и файл /media/com_mycomp/js/jqueryplugin.js. Хорошей практикой считается использовать папку media для расположения скриптов. Подробнее об этом вы можете прочитать в статье "Используйте папку media для разрешения переопределения медиаданных".