jquery 탭 플러그인 프로덕션 구현 code_jquery

jquery 플러그인의 기본 형식:

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

(function($){
$.fn.tab = function(options){//$.fn 뒤의 탭이 이 플러그인의 함수 이름입니다. 자신의 취향에 맞게 수정하시면 됩니다.
var defaults = {
//관련 속성 설정
}
var options = $.extend(defaults, options)
this.each(function(){
//Function 설정 구현});
})(jQuery);

여기서 탭 플러그인을 만들고 있습니다

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

(function($){
$.fn.tab = function(options){
var defaults = {
eventname: "click", //이벤트 발생, 클릭은 클릭, mousemove는 마우스 이동
titlekeyid: "tabtitle",//전환 ID
sedcss: "sed",//선택된 경우
nosedcss :"nosed" //선택되지 않은 경우 CSS
}
var options = $.extend(defaults, options)
this.each (function(){
var tab=$(this );
//이벤트 바인딩
$(tab).find("li").bind(options.eventname,function(){
$("#" options.titlekeyid).find( "li").attr("class", options.nosedcss)
$(this).attr("class", options.sedcss)
$("#" options.titlekeyid "info") .find("div").css("display", "none")
$("#" $(this).attr("id" ) "info").css("display", " block");
//JS 능력이 아직 부족하고 코드가 잘 작성되지 않은 것 같습니다
});
};
})(jQuery);


이 플러그인을 사용할 때 코드를 살펴보겠습니다. 🎜> (코드 2)

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


위의 두 문단을 결합하여 설명용 코드

코드 복사 코드는 다음과 같습니다. $("#tabtitle")은 당신을 의미합니다. 어디에 사용하나요? jquery에 대해 조금 아는 사람이라면 내가 이겼다는 의미를 알 것입니다. 자세히 소개하지 마세요.

.tab은 이 플러그인에 대해 정의한 함수 이름입니다. 의 (코드 1) 탭에 있는 $.fn.tab과 비교하세요.

.tab({eventname:"mousemove",sedcss:"sed"}); eventname과 sedcss는 (코드 1) var defaults ={};에 정의된 속성 값입니다. 속성 값을 변경할 필요가 없으면 기본 속성 값을 사용하고 플러그인은 다음과 같이 사용해야 합니다.



마지막으로 모든 페이지를 첨부합니다. 코드:

코드 복사

코드는 다음과 같습니다.

<제목>탭 테스트

"text/javascript">
$().ready(function(){
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"});
})


;body>

//여기의 ID는 $("#tabtitle")의 ID에 해당하며, LI의 ID는 끝에 추가된 숫자입니다
< ;li id=" tabtitle1" class="sed">asdfasfd

• asdfasfd


• asdfasfd


• asdfasfd


• asdfasfd
🎜>
//여기서 ID는 ul의 ID이고 ID는 끝에 추가된 숫자와 "info"입니다.

000000

< ;div id="tabtitle2info" style="display:none">111111


22222

< ;div id="tabtitle4info" style="display:none">33333

44444

< ;/div> 양해해주세요

소스코드 패키지 다운로드