Для того, что бы подключить все файлы скриптов и стилей в Joomla! 3.0 в правильной последовательности нужно cделать следующее. Подключить фреймворки, как написано в документации: Mootools, jQuery и Tweeter Bootstrap.
Подключение стилей и скриптов описано в документации и производится добавлением соответствующих значений, используя методы addScript
, addStyleSheet
, addScriptDeclaration
, addStyleDeclaration
, addScriptOptions
и addCustomTag
.
Ниже приведен листинг с примерами использования этих методов.
<?php // Подключение фреймворка mootools, который, в большинстве случаев, ненужен JHtml::_('behavior.framework', true); // Подключаем фреймворк jQuery, файлы которого стандартно находятся по пути /media/jui/js/ JHtml::_('jquery.framework'); // Подключаем фреймворк bootstrap, файлы которого стандартно находятся по пути /media/jui/js/ JHtml::_('bootstrap.framework'); // Предоставляет доступ к текущему JDocument, с можно установить метаданные, добавить стили и скрипты и многое другое, связанные с документом. $document = JFactory::getDocument(); // Добавляем, если нужно, необходимые для работы скрипты,. В переменной $this->baseurl находится значение базового урла $document->addScript($this->baseurl.'/media/jui/js/pictures.js'); // Добавляем, если нужно, каскадные стили bootstrap'а. В переменной $this->baseurl находится значение базового урла $document->addStyleSheet($this->baseurl.'/media/jui/css/bootstrap.min.css'); // Порядок добавления CSS важен, стили bootstrap можно менять, в $this->template находится путь до текущего шаблона $document->addStyleSheet($this->baseurl.'/templates/'.$this->template.'/css/customs.css'); // Вставлять код js непосредственно в шаблон лучше не через <script>…</script>, а делать так: $script = '(jQuery).("body").css("border","3px solid red");'; $document->addScriptDeclaration($script); // Вставлять код css непосредственно в шаблон нужно не через <style>…</style>, а так: $style = '.red-border: { border, 3px solid red; }'; $document->addStyleDeclaration($style); // Если необходимо вставить с псевдокомментариями, то нужно делать так $style = ''; $document->addCustomTag($style); // Передача параметров в js-скрипт $myOptions['colors'] = array('selector' => 'body', 'color' => 'green'); $document->addScriptOptions('mod_example', $myOptions); // Убираем метатег generator $document->setGenerator(''); // Убираем все следы mootools if (JRequest::getString('view') !== 'cart' and JRequest::getString('view') !== 'contact') unset($this->_scripts[$this->baseurl.'/media/system/js/mootools-core.js'], $this->_scripts[$this->baseurl.'/media/system/js/mootools-more.js'], $this->_scripts[$this->baseurl.'/media/system/js/core.js'], $this->_scripts[$this->baseurl.'/media/system/js/caption.js'], $this->_scripts[$this->baseurl.'/media/system/js/modal.js']); // Чистим подключаемый скрипт от остатков mootools if (isset($this->_script['text/javascript'])) { $this->_script['text/javascript'] = preg_replace('%jQuery\s*\(\s*window\s*\)\s*\.\s*on\s*\(\s*\'\s*load\s*\'\s*,\s*function\s*\(\s*\)\s*\{\s*new\s*JCaption\s*\(\s*\'\s*img\s*\.\s*caption\s*\'\s*\)\s*;\s*\}\s*\)\s*;*%', '', $this->_script['text/javascript']); $this->_script['text/javascript'] = preg_replace('%window\s*\.\s*addEvent\s*\(\s*\'\s*load\s*\'\s*,\s*function\s*\(\s*\)\s*\{\s*new\s*JCaption\s*\(\s*\'\s*img\s*\.\s*caption\s*\'\s*\)\s*;\s*\}\s*\)\s*;\s*%', '', $this->_script['text/javascript']); if (empty($this->_script['text/javascript'])) unset($this->_script['text/javascript']); } // Делаем jQuery первой в списке js-скриптов $tmp1 = '/media/jui/js/jquery.min.js'; $tmp = $this->_scripts[$tmp1]; unset($this->_scripts[$tmp1]); $this->_scripts = array($tmp1=>$tmp)+$this->_scripts; // Посмотреть значение подключенных внешних js-скриптов, css-файлов, включенных в html-текст скриптов и стилей можно так echo ''; var_dump( $_scripts, $_styles, $_script, $_style ); echo ''; ?>
При разработке каких-либо приложений в Joomla, если нужен какой-либо фреймворк, то он подключается так, как указано в строках 3, 5 и 7. При этом дублирование вызовов файлов фреймворков не производится.