- Adding JavaScript and CSS to the page
- Inserting from a File [ править ]
- $options and $attributes Parameters [ править ]
- Adding the Options to Your JavaScript Code [ править ]
- Passing Language Strings to JavaScript [ править ]
- Inserting Inline Scripts from Within a PHP File [ править ]
- JavaScript Example [ править ]
- CSS Examples [ править ]
- Add Custom Tag [ править ]
- Sample Module Code [ править ]
- Подключение собственных стилей CSS в шаблон сайта Joomla
- Подключение собственных стилей CSS из папки шаблона сайта в Joomla
- Использование класса JHtml Joomla для подключения собственных стилей CSS из папки шаблона сайта
- Выводы
Adding JavaScript and CSS to the page
This is one of a series of API Guides, which aim to help you understand how to use the Joomla APIs through providing detailed explanations and sample code which you can easily install and run.
Inserting from a File [ править ]
Joomla allows you to add JavaScript and CSS files to your HTML document, and it puts the associated and elements within the HTML section. To do this you call the addScript and addStyleSheet methods of the Joomla object which represents the HTML document. Since Joomla! buffers all the HTML-related data that makes up a page before output, it is possible to call these methods anywhere within your code.
First, get a reference to the current document object:
use Joomla\CMS\Factory; $document = Factory::getDocument(); // above 2 lines are equivalent to the older form: $document = JFactory::getDocument();
Then for a style sheet, use this code:
To add a JavaScript file, use this code:
where $url is the variable containing the full path to the JavaScript or CSS file. For example: JUri::base() . ‘templates/custom/js/sample.js’
Note this will not include Mootools or jQuery. If your script requires Mootools or jQuery see JavaScript Frameworks for full details on how to include them. (Note that jQuery can only be included natively on Joomla! 3.0+.) It used to be possible to do this with JHTML, however, this was deprecated in Joomla 2.5 and removed in Joomla 3.x.
$options and $attributes Parameters [ править ]
You can add $options and $attributes parameters to the above methods. The $options control overall how the and elements are output while the $attributes get set as HTML attributes within those tags. (Note that although there are Deprecated markers against the addScript and addStyleSheet methods of the Joomla Document API, these markers refer just to the signature of these methods; the form of the signature using $options and $attributes parameters is not deprecated). The $options parameter should be an array and 2 different options are currently supported:
- version => auto If this is set then a ‘media version’ is appended as a query parameter to the CSS or JavaScript URL within the or element. This is a string (an md5 hash) that is generated from factors including the Joomla version, your Joomla instance secret and the date/time at which the media version was generated. The media version is regenerated whenever anything is installed on the Joomla instance. Its purpose is to force browsers to reload the CSS and JavaScript files instead of using possibly outdated versions from cache.
$document->addStyleSheet(«. demo.css», array(‘version’=>’auto’)); // leads to something like //
The string of characters after the ? is the md5 hash, which will change when extensions or Joomla itself are installed/upgraded/uninstalled.
- conditional’ => ‘lt IE 9 (as an example). This outputs the or within a Conditional Comment which earlier versions of Internet Explorer interpreted.
$document->addScript(«. demo.js», array(‘conditional’=>’lt IE 9’)); // leads to //