jquery 탭 플러그인 프로덕션 구현 code_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)

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



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