widersprüchliche CSS und Javascripts

Question

Ich bin eine Komponente für Joomla-Website zu entwickeln. Diese Website verfügt über eine ausgereifte Vorlage mit ausgefallenen CSS und Scripts (nämlich einige K2 Komponenten genannt werden) In dieser Komponente I colorbox bin mit modaler Bildergalerie angezeigt werden, aber was passiert ist,

, sobald diese Komponente CSS-Eigenschaften und Funktionen von JavaScript der Vorlage aufgerufen wird, schlägt in einigen weared Seite zeigt führt. Da ich nicht diese CSS und Javascripts geschrieben habe, wird es recht umständlich für mich Konflikte zwischen CSS und Scripts zu verhindern.

Was ist also meine Frage ist

Gibt es einen Weg, um Konflikte zwischen diesen Skripten ohne Tauchen zu verhindern, viel in die aktuellen Skripte.

Bitte mich durch diese.

Danke im Voraus

Answer 1

K2 ist eine Content-Komponente für Joomla. Es ist nicht ungewöhnlich für Framework-Plug-In oder Add-ons Konflikt zu haben (s) miteinander. Leider könnten Sie in Joomla oder K2 Forum nach Antworten suchen müssen. Entweder das, können Sie anderes Plug-Ins nacheinander versuchen zu deaktivieren, bis der Konflikt verschwindet (hoffentlich).

Answer 2

Eine der wichtigsten Konflikte in JavaScript ist zwischen MooTools (erforderlich für einige Joomla functionaly) und anderen JavaScript-Bibliotheken. Am häufigsten ist die $ globale Variable, die üblicherweise als DOM-Selektor verwendet wird.

In MooTools, wählt er nur durch ID, während in anderen Bibliotheken wie JQuery, es CSS-Selektoren verwendet.

Wenn Sie also eine Joomla-Erweiterung haben, die eine andere JavaScript-Bibliothek wie JQuery lädt, Sie Probleme werden. Für JQuery, gibt es eine spezielle Lösung. http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Für andere Bibliotheken jedoch werden Sie in die JS tauchen müssen, oder eine Erweiterung verwenden, die die gleiche Funktionalität bietet, sondern nutzt MooTools.

Wie bei CSS, der einzige Weg, um dieses ist die CSS-Dateien zu bearbeiten. Gute Erweiterungen sollten eine Art Namensräume für ihre CSS verwenden. Zum Beispiel Präfix aller CSS-Klassen mit dem Komponentennamen. Oder wickelt alle HTML in einem Wrapper-Elemente nach der Komponente mit dem Namen oder Modul usw.

Wenn diese nicht existiert, werden Sie es selbst hinzufügen.

Wahrscheinlich ist die am einfachsten, die Erweiterungen HTML zu bearbeiten und hinzufügen:

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

um die Erweiterung.

Dann die Erweiterungen CSS bearbeiten und

#extension-name 

vor allen CSS-Selektoren.

Zum Beispiel, wenn Sie:

.left-column {
  float: left;
}

ändern Sie es an:

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

Sie können auch diesen Prozess mit einer regex Suche automatisieren und ersetzen.