Правильное подключение файлов Javascript и CSS к шаблону Joomla
Чтобы иметь правильно построенный документ XHTML, Вы должны поместить все ссылки на файлы Javascript и CSS в пределах <head> части. Вы можете подключать необходимые JavaScript и CSS файлы непосредственно из своих расширений и модулей Joomla используя функциональность, встроенную в Joomla! CMS:
// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHTML::script($filename, $path, $mootools);
// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHTML::stylesheet($filename, $path);
При использовании такого подхода, Joomla сама будет заботиться о всех дополнительных параметрах. Например, если Ваш скрипт требует предварительной загрузки библиотеки Mootools, установите $mootools в true и Joomla! Подключит mootools, если это не было сделано ранее.
Однако такой подход не достаточно гибок для расширений. Более продвинутый подход для подключения javascript и css к Joomla заключается в следующем:
Для начала получите ссылку на действующий объект:
$document =& JFactory::getDocument();
Для подключения javascript файла к Joomla, используйте код:
$document->addScript($url);
Учтите, что при таком подходе mootols не будет подключен автоматически. Для подключения mootools к Joomla используйте код:
JHTML::_("behavior.mootools");Для подключения стилевого файла к Joomla, испоьзуйте код:
$document->addStyleSheet($url);
Если ваш javascript или css код не вынесен в отдельный файл, используйте следующий код:
// Add Javascript
$document->addScriptDeclaration($javascript, $type);
// Add styles
$document->addStyleDeclaration($styles, $type);
Ниже пример такого подхода:
function getToolTipJS($toolTipVarName, $toolTipClassName){
$javascript = 'window.addEvent(\"domready\", function(){' ."\n";
$javascript .= "\t" .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
$javascript .= "\t\t" .'className: "' .$toolTipClassName .'",' ."\n";
$javascript .= "\t\t" .'initialize: function(){' ."\n";
$javascript .= "\t\t\t" .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onShow: function(toolTip){' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(1);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onHide: function(toolTip) {' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(0);' ."\n";
$javascript .= "\t\t" .'}' ."\n";
$javascript .= "\t" .'});' ."\n";
$javascript .= '});' ."\n\n";
return $javascript;
}
$document =& JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));Однако есть случаи, когда и такой подход не является достаточно гибким, т.к. код обрамлен тегами <script></script> и <style></style>. Тогда Вам подойдет такой код, для вставки произвольного кода в <head> Joomla:
$stylelink = '<!--[if lte IE 6]>' ."\n";
$stylelink .= '<link rel="stylesheet" href="/../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";
$document =& JFactory::getDocument();
$document->addCustomTag($stylelink);
Добавить комментарий
