jQuery 플러그인 tabBox 구현 code_jquery

jq의 공식 플러그인 작성 문서(http://docs.jquery.com/Plugins/Authoring)와 그 문서에서 추천하는 Mike Alsup의 글을 확인했습니다 플러그인 개발 패턴. 제 영어 실력이 별로 좋지는 않지만 그래도 최선을 다해 읽으려고 노력했고(지식을 배우고 영어를 연습하는 것도 동시에 할 수 있는데 왜 하지 않겠습니까), 데뷔 소설인 tabBox를 썼습니다.

이름에서 알 수 있듯이 이 플러그인은 탭 기능을 사용하여 "상자"를 생성하는 편리한 방법입니다. 사진만 봐도

이런 종류의 기능은 프론트엔드나 백엔드에 관계없이 웹페이지에서 매우 유용하다는 것을 알 수 있습니다.

여기서는 먼저 커스텀 플러그인에 대한 3가지 매개변수를 제공합니다.

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

$.fn.tabBox.defaults = {
너비: 260,
높이: 200,
basePath: "tabBox/"
};

너비와 높이는 "상자"의 너비와 높이를 정의하고, basePath는 플러그인을 사용하여 플러그인 폴더에 대한 페이지의 상대 경로를 정의하는 데 사용됩니다. 이 옵션은 그림이 탭 스타일로 사용되기 때문에 최후의 수단으로 나타나는데, 그림의 경로를 정확하게 찾기 위해서는 참조 경로가 있어야 합니다. 이는 또한 jqtransform(
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/)이라는 플러그인의 실행을 기반으로 합니다. 또한 사진 폴더의 위치를 ​​지정하는 데 사용되는 매개변수가 있습니다. 물론 다른 방법도 있습니다. WebUI(http://www.jqueryui.com/)처럼 CSS 파일에 스타일을 적어서 참조하도록 하는 것입니다. 이미지는 먼저 CSS 파일 경로와 비교되며 둘 다 플러그인의 구성 요소이며 상대 경로는 변경되지 않습니다. 따라서 이 경로를 제공할 필요가 없습니다. 이 플러그인은 비교적 적은 수의 스타일을 사용하기 때문에 이 방법은 사용되지 않습니다. 플러그인의 원리는 매우 간단합니다. 핵심 기능은 탭 스타일을 렌더링하는 데 사용되는 render()입니다.

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

$.fn.tabBox.render = function() {
$(".tabBox").css({
너비 : $.fn.tabBox .defaults.width "px",
높이 : $.fn.tabBox.defaults.height "px",
위치 : "상대",
테두리 : " 1px #ccc solid",
배경 : "url(" $.fn.tabBox.defaults.basePath "tabHead.gif) 왼쪽 상단 반복-x"
});
$(".tabBox h2 ").each(function(i) {
$(this).css({
너비 : "80px",
높이 : "30px",
위치 : "절대",
"border-top" : "none ",
커서 : "포인터",
왼쪽 : 10 (i*80),
배경 : "url(" $.fn.tabBox.defaults.basePath "tabNormal.gif) 오른쪽 상단 반복 없음",
"text-align" : "center",
"font-size" : "12px",
"font-weight" : "normal" ,
color : "#06c ",
"line-height" : "22px"
})
})
$(".tabBox div").each(function (){
$(this ).css({
너비 : $.fn.tabBox.defaults.width "px",
높이 : ($.fn.tabBox.defaults.height-30) "px",
표시: "없음",
위치: "절대",
상위: "30px"
})
$(".tabBox h2.curTab").css({
배경 : "url(" $.fn.tabBox.defaults.basePath "tabCurTab.gif) 상단 중앙 반복 없음",
"font-weight" : "굵게 "
});
$(".tabBox h2.curTab div").css({
display : "block"
});
};


이 함수를 모두 보실 수 있습니다. 스타일을 설정하는 코드입니다(jq로 CSS를 설정하는 즐거움도 느낄 수 있었고, 아직도 e.style.backgroud 시절이 생각나네요~). 현재 활성화된 태그와 해당 정보가 표시되는지 확인합니다. 또한 탭의 클릭 이벤트를 캡처하여 현재 활성 레이블을 변경하고 다시 렌더링합니다.

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

$(".tabBox h2"). click(function (){

$(".tabBox h2").removeClass("curTab");
$(this).addClass("curTab");
$.fn.tabBox.render ();
});

작성 후 느낀 점:

1. 플러그인 사용자 정의 옵션이 잘 이해되지 않습니다.

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

// 요소 반복 전에 기본 옵션 빌드
var opts = $.extend({}, $.fn.tabBox.defaults, options)
// 일치하는 각 요소를 반복하고 형식을 다시 지정합니다.
return this.each(function() {
$this = $(this);
// 요소별 옵션 빌드
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

Mike Alsup의 글을 거의 복사한 것이라고 합니다. 그에 따르면 플러그인 전체를 맞춤 설정할 수 있는 옵션인 것 같습니다. 특정 요소에 대한 옵션도 정의할 수 있는데 실행이 안 되는 것 같아요~. 무슨 말인지 이해가 안 됐나요?

2. 현재는 탭이 클릭 이벤트를 캡쳐하고 있어요. 이제 클릭을 캡처할지 아니면 마우스 오버를 캡처할지 사용자 정의할 수 있습니다. 예, 두 개의 이벤트 핸들러를 작성할 수 있습니다. 그런데 구성을 통해 어떤 핸들러를 호출할지 결정하는 방법은 무엇입니까?