冲突的CSS和Javascripts

Question

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

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

那么我的问题是什么

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

请指导我。

提前完成

Answer 1

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

Answer 2

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;
}

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