사용자 정의 jQuery 플러그인

jQuery 플러그인을 작성하는 두 가지 방법
1. jQuery 대상급 플러그인을 추가하는 것은 jQuery 클래스에 추가하는 방법입니다
쓰기 방법:

(function($){  

    $.fn.extend({  

함수 이름:function(사용자 정의 매개 변수) {

//여기에 플러그인 코드를 씁니다

        }  

    });  

})(jQuery);  

또는

(function($){  

    $.fn.함수 이름 = function(사용자 정의 매개 변수) {

//여기에 플러그인 코드를 씁니다

    }  

})(jQuery);  

호출 방법: $("#id").함수 이름(매개 변수);
2. jQuery 클래스 수준의 플러그인, 정적 방법 추가

(function($){  

    $.extend({  

함수 이름:function(사용자 정의 매개 변수) {

//여기에 플러그인 코드를 씁니다

        }  

    });  

})(jQuery);  

또는

(function($){  

    $.함수 이름 = function(사용자 정의 매개 변수) {

//여기에 플러그인 코드를 씁니다

    }  

})(jQuery);  

호출 방법: $.함수 이름(매개 변수);
1. 어떤 기능을 할지 먼저 생각해 본다.
이것은 첫걸음이자 매우 중요한 걸음이다. 우리가 모두 jQuery 플러그인을 쓰는 것을 막 배운 것을 감안하면 이 기능은 반드시 좀 간단해야 한다.한 입에 뚱보를 먹으려고 하지 마라, 우리도 먹을 수 없다.우리 마른 손을 줍는 것이 좋겠다.그러나 이 기능도 너무 지루해서는 안 된다. 심심해서 거의 쓸모가 없으면 잘 만들어도 변기에 던져 버려야 한다. 계속 업데이트되지 않고 계속 발전하지 않는다.
내가 최종적으로 선택한 것은 표를 미화하고 짝짓기 줄의 색깔을 다르게 한 다음에 마우스를 한 줄로 옮기면 한 줄이 밝게 보일 수 있다는 것이다.기능이 간단하고 실용적이어서 괜찮다, 괜찮다.허허~
2. 급하게 쓰지 말고 실현 원리부터 생각해
아직 급하지 않으니 먼저 실현 원리를 생각해 봐라.필요할 때 간단하게 실현된 원형을 먼저 써라.
나의 이 미화 표의 예는 실현 원리가 간단하다. 표의 짝짓기 줄을 찾은 다음에 다른class를 추가하면 활동 줄의 하이라이트 디스플레이도 간단하다. 모스오버 이벤트를 판단한 다음class를 추가하고mouseout을 추가할 때 이class를 제거하면 된다.
3, 일반적인 프레임워크
자신의 jQuery 플러그인을 쓰기 전에 다른 사람이 쓴 플러그인을 먼저 연구해야 한다.사실 jQuery를 쓰는 것도 기본적으로 통용되는 프레임워크가 있다.좋아, 그럼 우리도 이 틀을 그대로 옮겨 오자.

(function($){

    $.fn.yourName = function(options){

        //    、  

        }

        var options = $.extend(defaults, options);

        this.each(function(){

        //      

        });

    };

})(jQuery);

이것만 있으면 우리는 안에 물건을 끼워 넣을 수 있다.
4, 이름, 매개변수 및 속성
가까스로 강호를 떠돌아다니기 시작했으니 반드시 명성이 높아야 한다. 이렇게 강호를 걸어야만 위풍당당할 수 있다.믿지 못하겠으면 남의 "중국 치방팀"을 들어 봐!그래서 우리는 이곳에서 반드시 명성을 떨쳐야 한다. 반드시 간단명료하고 권위가 있어야 한다.그래서'tableUI'라고 결정했어요!
매개 변수와 속성도 간단합니다. 단지 세 개의class 이름일 뿐입니다.이벤트 로클라스, odd 로클라스, active 로클라스라고 하죠.
그래서 위의 틀을 우리는 상반신을 채웠다.

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            //    

        });

    };

})(jQuery);

여기서 이 한 마디를 중점적으로 말하자면:

var options = $.extend(defaults, options);

멋있어 보이는 한마디, 사실은 여러 대상을 하나로 합치는 것이다.여기 있습니다. 호출할 때 새로운 파라미터를 썼으면 새 파라미터를 사용하고, 안 썼으면 기본 파라미터를 사용합니다.자세한 내용은 jquery의 공식 문서를 참조하십시오.http://api.jquery.com/jQuery.extend/
5, 하반신 시작
오케이, 상체를 다 채우면 하반신을 채울 수 있겠지.기본 줄과 짝수 줄을 찾아서 (jQuery가tr:even과 같은 맞춤법을 제공해 주셔서 감사합니다.) 그리고 해당하는class를 추가합니다.그리고 모든tr를 주고mouseover와mouseout 이벤트를 연결하면 됩니다.하반신 코드는 다음과 같습니다.

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            var thisTable=$(this);

            //       

            $(thisTable).find("tr:even").addClass(options.evenRowClass);

            $(thisTable).find("tr:odd").addClass(options.oddRowClass);

            //       

            $(thisTable).find("tr").bind("mouseover",function(){

                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout",function(){

                $(this).removeClass(options.activeRowClass);

            });

        });

    };

})(jQuery);

6, 가장 중요한 걸음!
아마도 몇몇 친구들은 이렇게 하면 완성된 것이라고 생각할 것이다.그러나 정반대적으로 우리가 완성하지 못한 가장 중요한 단계는 플러그인 위에 반드시 플러그인의 이름, 버전 번호, 완성 날짜, 작가, 작가의 연락처, 생년월일, 삼둘레 등을 써야 한다는 것이다.그래야 이 플러그인이 프로답게 나오니까.

/*

 * tableUI 0.1

 * Copyright (c) 2009 JustinYoung  http://justinyoung.cnblogs.com/

 * Date: 2010-03-30

 *   tableUI              。              ，        

 */

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            var thisTable=$(this);

            //       

            $(thisTable).find("tr:even").addClass(options.evenRowClass);

            $(thisTable).find("tr:odd").addClass(options.oddRowClass);

            //       

            $(thisTable).find("tr").bind("mouseover",function(){

                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout",function(){

                $(this).removeClass(options.activeRowClass);

            });

        });

    };

})(jQuery);