JQuery 플러그인 스타일 사용자 정의 방법 분석 및 비교_jquery

1 서문
최근 프로젝트의 필요로 인해 JQuery 플러그인을 사용했습니다. 플러그인을 다운로드한 후 많은 기본 플러그인 스타일이 프로젝트 요구 사항을 충족하지 않아 수정해야 한다는 사실을 곧 알게 되었습니다.
이 과정에서 플러그인 스타일을 사용자 정의하기 위해 다양한 방법을 사용했다는 사실을 알게 되었습니다. 드디어 제가 생각하는 최선의 방법을 발견하게 되어 매우 기쁩니다. CSS에 대한 이해도 깊어지고 많은 감동을 받았습니다. 이 글은 이러한 새로운 CSS에 대한 이해를 요약한 것입니다.
2 JQuery 플러그인 스타일 사용자 정의 방법
2.1 플러그인 초기화 시 사용자 정의 개체 입력
더 나은 플러그인에서는 초기화 중에 사용자 정의 개체를 입력할 수 있습니다.
사용자 정의 개체를 입력하면 플러그인은 사용자 정의 개체의 값을 사용합니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

var adgallerySetting = {
width: 600, // 이미지의 너비, false로 설정하면 CSS 너비
높이를 읽습니다. : 400, // 이미지 높이, false로 설정하면 CSS 높이를 읽습니다.
}
var gallery = $('.ad-gallery').adGallery(adgallerySetting)

사용자 정의 항목이 입력되지 않은 경우 플러그인은 자체 기본값을 사용합니다. 예를 들어
var gallery = $('.ad-gallery').adGallery()
2.2 수정 플러그인의 CSS
플러그인이 사용자 정의를 제공하지 않는 경우 수정하려는 개체 또는 스타일이 사용자 정의된 개체 정의에 없습니다. 보다 직관적인 방법은 플러그인의 CSS 파일을 수정하는 것입니다. 이는 플러그인 자체의 소스 코드를 손상시키고 향후 플러그인 버전 업데이트에 도움이 되지 않으므로 옹호할 가치가 있는 방법이 아닙니다.
2.3 콜백 함수 등록
대부분의 플러그인은 사용자 정의 개체에도 콜백 함수를 정의합니다. 플러그인이 스타일 강화를 완료한 후 콜백 함수가 호출되면 이 콜백을 작성하여 등록하고 콜백에서 DOM 모델을 수정하여 플러그인 스타일의 사용자 정의를 완료할 수 있습니다. 이 방법은 더 번거롭고 플러그인의 내부 구현을 이해하는 데 더 많은 시간을 소비해야 합니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

var adgallerySetting = {
// 모든 콜백에는 'this' 참조
콜백으로 AdGallery 객체가 있습니다. {
// 이것은 old_image가 사라지기 직전에 시작되고 new_image
//가 곧 들어오기 전에 시작됩니다.
beforeImageVisible: function(new_image, old_image) {
// 뭔가 해보세요!
var thing = "this is it"
//플러그인 강화 페이지 변경
$(".ad -gallery .ad -image-wrapper .ad-image").removeAttr("스타일");
$(".ad-gallery .ad-image-wrapper .ad-image").css("너비" , "100% ");
var width = $(".ad-gallery .ad-image-wrapper .ad-image img").attr("width")
$(".ad- gallery .ad- image-wrapper .ad-image img").attr("width", "100%");
$(".ad-gallery .ad-image-wrapper .ad-image .img" ).attr( "너비", 100%);
$(".ad-gallery .ad-image-wrapper .ad-image").attr("높이", 100%)
}
}
};

2.4 새 CSS 파일 추가 및 플러그인 스타일 일부 다시 로드
CSS는 이름에서 알 수 있듯이 Cascading Style Sheet의 약어입니다. 계단식 표준이 있습니다. 여러 CSS 파일이 동일한 HTML 요소의 스타일 정의와 충돌하는 경우 다음 규칙에 따라 적용할 CSS 스타일을 결정합니다.
1) !
2) 출처. 작성자(HTMl로 링크된 CSS 파일), 독자(웹서퍼), 사용자 에이전트(브라우저)
3) 관련성.
자세한 내용은 참고자료 섹션의 링크 페이지에서 확인하실 수 있습니다.
제 생각에는 이 방법이 1.1을 제외하면 가장 좋은 방법입니다. 다음은 몇 가지 코드 예제입니다.

코드 복사 코드는 다음과 같습니다.

#descriptions .ad-image-description {
위치: 절대;
}
#descriptions .ad-image-description .ad-description-title {
디스플레이: 블록
}
.ad-gallery .ad- image-wrapper .ad-image {
너비: 100% !
왼쪽: 0px !중요;
3 요약
이 경험을 바탕으로 플러그인 스타일을 사용자 정의하는 가장 좋은 방법은 사용자 정의된 개체(플러그인이 지원하는 경우)를 입력하거나 CSS 오버로딩이라고 생각합니다. 일부 플러그인은 HTML 요소에 style="...."을 추가하여 스타일을 정의합니다. 이 경우에는 "! important" 로고의 모양이 상당히 위안이 된다는 것을 알게 될 것입니다. J
참고자료 4개
http://www.w3.org/TR/CSS21/cascade.html
http://stackoverflow.com/questions/7022344/ css-newbie-questions-on-authors-style-readers-style-agents-style
http://htmlhelp.com/reference/css/structure.html
http://css-tricks.com/override-inline-styles-with-css/