冲突的CSS和Javascripts

时间:2009-10-28 07:53:43

标签: javascript css joomla

我正在为Joomla网站开发一个组件。这个网站有一个复杂的模板与花哨的CSS和脚本(即一些K2组件被命名)在这个组件中我使用colorbox显示模态图片库,但会发生什么

一旦调用此组件,CSS属性和模板的javascript函数就会失败,导致一些页面显示出来。 由于我没有编写这些CSS和javascripts,因此防止CSS和脚本之间的冲突对我来说非常麻烦。

那么我的问题是什么

有没有办法防止这些脚本之间的冲突而不会深入到实际的脚本中。

请指导我。

提前完成

2 个答案:

答案 0 :(得分:0)

K2是Joomla的内容组件。框架插件或附加组件彼此之间存在冲突并不罕见。不幸的是,您可能需要搜索Joomla或K2论坛以获取答案。要么就是这样,你可以尝试逐个禁用其他插件,直到冲突消失(希望如此)。

答案 1 :(得分:0)

JavaScript中的一个主要冲突是MooTools(某些Joomla functionaly所需)和其他JavaScript库之间。最常见的是$ global变量,它通常用作DOM选择器。

在MooTools中,它只按ID选择,而在其他库如JQuery中,它使用CSS选择器。

因此,如果你有一个Joomla扩展加载另一个像JQuery这样的JavaScript库,你会遇到问题。对于JQuery,有一个特定的解决方案。 http://docs.jquery.com/Using_jQuery_with_Other_Libraries

但是对于其他库,您需要深入了解JS,或使用提供相同功能但使用MooTools的扩展。

对于CSS,唯一的解决方法是编辑CSS文件。好的扩展应该为他们的CSS使用某种命名空间。例如,使用组件名称为所有CSS类添加前缀。或者将所有HTML包装在以组件或模块等命名的包装器元素中。

如果不存在,则必须自行添加。

最简单的方法是编辑扩展程序HTML并添加:

<div id="extension-name">
  <!-- extension HTML here -->
</div>

在扩展名附近。

然后编辑扩展CSS并添加

#extension-name 

所有CSS选择器之前。

例如,如果你有:

.left-column {
  float: left;
}

将其更改为:

#extension-name .left-column {
  float: left;
}

您甚至可以使用正则表达式搜索和替换来自动执行此过程。