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

StackOverflow https://stackoverflow.com/questions/1635730

  •  06-07-2019
  •  | 
  •  

Вопрос

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

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

Итак, в чем заключается мой вопрос?

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

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

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

Это было полезно?

Решение

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

Другие советы

Один из основных конфликтов в JavaScript возникает между MooTools (необходимым для некоторых функций Joomla) и другими библиотеками JavaScript.Наиболее распространенной является глобальная переменная $, которая обычно используется в качестве селектора 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;
}

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top