Л
и
ч
н
ы
й
 
к
а
б
и
н
е
т
Goldensites | CMS Joomla | Joomla 1.5 | Статьи Joomla | Правильное подключение файлов Javascript и CSS к шаблону Joomla

Правильное подключение файлов 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);

Теги:

Комментарии 

 
0 #13 Влад 09.06.2017 15:57
Примеры не судьба привести с описанием ???
Цитировать
 
 
0 #12 Владимир 13.12.2016 09:46
Автор- просто разжуйте статью, а то половина не поняла куда вставлять.. Или напишите, сразу, что статья для профи.

Тупо потратил 10 минут
Цитировать
 
 
+13 #11 MdS 21.08.2016 11:01
Пиздец! Статья не о чем! Где и куда прописывать, лошара сам скопипастил статью!
Цитировать
 
 
-6 #10 Vlad 24.12.2015 14:25
Автору спасибо)
Цитировать
 
 
+14 #9 drval 05.05.2015 10:04
Что за снобизм? Часть комментаторов считают себя гуру в J!? Так напишите пару строк, куда это вставляется вместо того, что бы кричать "Ха, ламер, а я погромист." Знал я таких "гуру", которые довольно сложные (но по сути, шаблонные) сайты делали на нескольких фрейворках, но не знали, как обычную сортировку массива выполнить.
Зачем мне учить основы вашей Жумлы, если мне нужно всего-то раз в год подключить два файла, и наврядли я с ней больше буду работать? Потратить кучу времени на изучение того, что скорее всего не пригодится, вместо того, чтобы прочитать и сделать.
Цитировать
 
 
-11 #8 Бендер Родригес 27.08.2014 19:34
Цитирую none:
Ебанутая статья, афтар а ничё то что тут нет информации где писать данный код? или надо самим скать использую впервые джумлу?

Комментатор, кури маны, конина тупая. Эта статья для начинающих разработчиков под Joomla, а не нубасов, не понимающих основ. Следи за словами. Аффтару статьи респект
Цитировать
 
 
-10 #7 Антон 16.07.2014 15:30
Цитирую none:
Ебанутая статья, афтар а ничё то что тут нет информации где писать данный код? или надо самим скать использую впервые джумлу?

Блин, как можно судить какая статья, хорошая или плохая не зная основы .
Цитировать
 
 
0 #6 GS 13.04.2014 09:32
jdoc:include type="head"
Цитировать
 
 
+2 #5 GS 13.04.2014 09:31
Код прописывается в Вашем расширении - компоненте или модуле, или плагине. Выводится код подключения скриптов в шабоне с помощью
Чего не понятного то?
Цитировать
 
 
+5 #4 KKK 13.04.2014 08:00
;-) а где это все прописать-то? Код -то ясен...
Цитировать
 
 
-19 #3 Барабашка 30.12.2013 19:06
статья помогла. Спасибо автору
Цитировать
 
 
+8 #2 Виктор 24.12.2013 12:25
;-) Ебанутый автор первого коментария, а автору статьи спасибо, я искал способ подключения js и css для модуля.
Цитировать
 
 
+23 #1 none 14.12.2013 20:22
Ебанутая статья, афтар а ничё то что тут нет информации где писать данный код? или надо самим скать использую впервые джумлу?
Цитировать