충돌하는 CSS 및 Javascripts

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

  •  06-07-2019
  •  | 
  •  

문제

Joomla 웹 사이트의 구성 요소를 개발하고 있습니다. 이 웹 사이트에는 멋진 CSS 및 스크립트가있는 정교한 템플릿이 있습니다 (즉, 일부 K2 구성 요소가 명명 됨)이 구성 요소에는 Colorbox를 사용하여 모달 사진 갤러리를 표시하는 것이 있습니다.

이 구성 요소가 CSS 속성이라고하며 템플릿의 JavaScript의 기능이 실패하여 일부 마모 페이지 디스플레이가 발생합니다. 이 CSS와 JavaScripts를 작성하지 않았기 때문에 CSS와 스크립트 간의 충돌을 방지하는 것은 매우 번거 롭습니다.

그래서 내 질문은 무엇입니까?

실제 스크립트에 많이 다이빙하지 않고이 스크립트 간의 충돌을 방지하는 방법이 있습니까?

이것을 안내 해주세요.

미리 고맙습니다

도움이 되었습니까?

해결책

K2는 Joomla의 컨텐츠 구성 요소입니다. 프레임 워크 플러그인이나 애드온이 서로 충돌하는 것은 드문 일이 아닙니다. 불행히도, 당신은 답변을 위해 Joomla 또는 K2 포럼을 검색해야 할 수도 있습니다. 그럼에도 불구하고 갈등이 사라질 때까지 다른 플러그인을 하나씩 비활성화 할 수 있습니다 (희망적으로).

다른 팁

JavaScript의 주요 충돌 중 하나는 Mootools (일부 Joomla Functionaly에 필요한)와 기타 JavaScript 라이브러리 사이입니다. 가장 일반적으로 DOM 선택기로 일반적으로 사용되는 $ Global 변수입니다.

Mootools에서는 ID로만 선택하지만 JQuery와 같은 다른 라이브러리에서는 CSS Selectors를 사용합니다.

따라서 JQuery와 같은 다른 JavaScript 라이브러리를로드하는 Joomla 확장 기능이 있으면 문제가 발생합니다. 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;
}

Regex 검색 및 교체 로이 프로세스를 자동화 할 수도 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top