конфликтующие CSS и Javascripts

Question

Я разрабатываю компонент для сайта Joomla. Этот веб-сайт имеет сложный шаблон с причудливыми CSS и сценариями (а именно, некоторые компоненты K2 названы). В этом компоненте я использую colorbox для отображения модальной галереи изображений, но происходит

, как только этот компонент называется CSS, свойства и функции javascript шаблона не работают, что приводит к отображению некоторых изношенных страниц. Поскольку я не писал эти CSS и javascript-коды, мне было бы довольно неудобно предотвращать конфликты между CSS и сценариями.

Так, что мой вопрос

Есть ли способ предотвратить конфликт между этими сценариями, не вдаваясь в подробности реальных сценариев.

Пожалуйста, проведите меня через это.

Спасибо заранее

Answer 1

Один из основных конфликтов в JavaScript возникает между MooTools (требуется для некоторых функций Joomla) и другими библиотеками JavaScript. Наиболее распространенной является переменная $ global, которая обычно используется как селектор DOM.

В MooTools он выбирается только по идентификатору, а в других библиотеках, таких как JQuery, используются селекторы CSS.

Так что если у вас есть расширение Joomla, которое загружает другую библиотеку JavaScript, такую ​​как JQuery, вы столкнетесь с проблемами. Для 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;
}

Вы даже можете автоматизировать этот процесс с помощью поиска и замены регулярных выражений.

Answer 2

K2 является компонентом контента для Joomla. Нет ничего необычного в том, что плагины или надстройки фреймворка конфликтуют друг с другом. К сожалению, вам, возможно, придется поискать ответы на форуме Joomla или K2. Либо, вы можете попробовать отключить другие плагины один за другим, пока конфликт не исчезнет (надеюсь).