从文件中插入
为了形成一个结构良好的XHTML文档，你需要将所有的JavaScript脚本和CSS文件放到<head></head>标签之间。由于joomla会在向客户端输出之前产生所有的HTML内容，所有我们可以在自己的扩展中修改<head></head>标签之间的内容，这样就实现了加入css和js的方法。
下面举一个例子：
//添加一个JavaScript文件的引用。默认的路径是media/system/js/;
JHTML::script($fileName,$path,$mootools);
// 添加一个css文件。默认的路径是media/system/css/
JHTML::stylesheet($fileName,$path);
用这些函数，joomla将会小心的处理附加的请求。例如，如果你的JavaScript需要Mootools的支持，设置$mootools = true将会自动的确保Mootools被正确加载。
但是这种方法并不是非常的灵活，所以我们建议用下面的函数代替。
$document = JFactory::getDocument();
$documnet->addStyleSheet($url);
$document->addScript($url);
注意 系统不会自动的加载 Mootools 和 jQuery
在一个PHP文件中插入
如果JavaScript文件和css文件并不是位于分开的文件，你可以用php来产生他们。在这种情况下，你可以直接写脚本和css到文档的头部。
$document = JFactory::getDocument();
//add JavaScript
$document->addScriptDeclaration($javascript,$type);
// add CSS
$document ->addStyleDeclaration($style,$type);
下面是JavaScript的例子
下面的js代码定义了自己点的tool tip。
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"));
加css的方法
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'modules/mod_example/css/mod_example.css');
$style = '#example {
border-color:#' . $bordercolor . ';
}';
$document->addStyleDeclaration( $style );
添加自定义的标签
一些情况下，我们需要加入一些特殊的标签，不是<script><style>。这个时候，我们该怎么办呢？
一个实例就是css文件。我们需要仅在浏览器为ie6或者以前时才加入一个Ie6.css这个文件，那么这时我们可以
用下面的代码
$stylelink = '<!--[if lte IE 6]>' ."\n"; $stylelink .= '<link rel="stylesheet" href="/../css/IEonly.css" />' ."\n"; $stylelink .= '<![endif]-->' ."\n"; $document = JFactory::getDocument(); $document->addCustomTag($stylelink);