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

时间:2011-11-03 22:24:08

标签: joomla

我开始使用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但我无法弄清楚JS / CSS文件的URL应该是什么?

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

    由于

5 个答案:

答案 0 :(得分:15)

我会说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');

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

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

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

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

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

答案 1 :(得分:11)

您可以将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

答案 2 :(得分:8)

您可以使用:

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

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

答案 3 :(得分:6)

$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');

答案 4 :(得分:-1)

<script type="text/javascript" src="<?php echo JURI::BASE()?>modules/your_module_name/js/your_js_file"></script>

代表Css:

<link href="<?php echo JURI::BASE()?>modules/your_module_name/css/your_css _file" type="text/css" media="all" rel="stylesheet">