如何将JS/CSS文件添加到Joomla模块？

Question

我开始使用Joomla并且正在编写一个简单的Joomla模块.我在我的模块中使用了一些自定义CSS和JS.现在,当我分发这个模块时,我需要我的JS/CSS文件与ZIP一起使用.我已将文件添加到模块ZIP文件中.

这是我需要知道的 -

1. 我如何在我的模块中引用这些CSS/JS文件,这样即使我将模块作为zip分发,我也不必单独发送css/js文件？

2. 我试着寻找不同的解决方案,包括 http://www.howtojoomla.net/how-tos/development/how-to-add-cssjavascript-to-your-joomla-extension但我无法弄清楚URL是什么JS/CSS文件应该是？

我正在使用托管在云托管网站上的Joomla 1.7.

谢谢

Answer 1

我会说HowToJoomla网站的文章几乎总结了这个过程.

这是添加了几个步骤的过程 - 希望这会有所帮助.

我假设您已经包装了您的扩展程序,并且能够将您的css和javascript文件安装到服务器上.它们可能位于您的模块文件夹中,或者可能更准确地说它们应位于/ media /文件夹下的modules子文件夹中.

如果安装模块后无法找到您的css和js文件,因为您没有在组件的xml安装文件中正确引用它们.此页面包含有关1.6/1.7附加组件的xml安装/清单文件的信息,尽管它适用于组件:http://docs.joomla.org/Developing_a_Model-View-Controller_%28MVC%29_Component_for_Joomla! 1.6_-_ Part_01他们非常相似.

无论哪种方式 - 在Joomla的文件夹结构中找到您的文件,并记下他们从网站根目录的相对路径 - 即包含configuration.php的文件夹

现在在模块的php中的某个地方 - 添加获取对JDocument对象的引用的行.

$document = JFactory::getDocument();

现在添加将javascript添加到html head区域的行:

$document->addScript('url/to/my/script.js');

显然用你的javascript的实际相对路径替换'url/to/my/script.js'.

现在添加将你的css添加到html头部的行:

$document->addStyleSheet('url/to/my/stylesheet.css');

再次调整路径 - 例如可以是media/mod_mymodule/mymodule.css(如果你的模块被称为'mymodule').

只有事情需要注意的是,你需要在退出php模式后在可执行的php标签中添加这些行,而不是在html区域内.

Answer 2

您可以将js/css文件添加到/ media文件夹.

http://docs.joomla.org/Manifest_files#Media_files

只需添加到您的清单文件:

        <files>
           ...
        </files>
        <media folder="media" destination="mod_your_module">
            <folder>css</folder>
            <folder>js</folder>
        </media>

在可安装程序包中,您现在应该具有/ media文件夹.

然后添加到视图文件:

        $doc =& JFactory::getDocument();
        $doc->addScript("/media/mod_your_module/js/script.js");

本文解释了这种方法的好处:http:
//blog.joomlatools.com/2008/09/hidden-feature-joomlas-media-folder.html

Answer 3

你可以使用:

JHTML::script('modules/mod_your_module/js/script.js');
JHTML::stylesheet('modules/mod_your_module/css/stylesheet.css');

此示例不需要 JFactory::getDocument()

Answer 4

$document = JFactory::getDocument();
$modulePath = JURI::base() . 'modules/mod_your_module_name/';

//Adding JS Files
$document->addScript($modulePath.'js/myscript.js');

//Adding CSS Files
$document->addStyleSheet($modulePath.'css/style.css');