이번 블로그에서는 jQuery 사용자 정의 메소드를 만드는 걸 해볼랍니다.
뭐.. 이제와서 사용자 정의 메소드를 만들어 보는게 참.. 거시기 합니다만.. 언제까지나 따라하기 신공으로는 필요한 모든걸 충족하기 힘들잖습니까?

jQuery 확장 메소드작성시 항상 주의해야 하는것은.
  1. jQuery 확장 메소드는 jQuery 확장 집합을 반환해 주는것이 좋다.
  2. jQuery 의 별칭인 $는 다른 javascript framework에서도 사용중이며, $.noConflict() 함수를 사용할수 있다.
  3. 매개변수의 전달을 최소화하라.(기본값을 사용하라)
그럼 jQuery 확장 메소드를 만들어보자.

    (function($){

    })(jQuery);

위와 같은 준비 코드를 작성하라.
위의 코드는 주의 2 jQuery의 별칭인 $를 다른 javascript framework에서도 사용하고 있다는 예외 사항을 대비한 코드이다.
매개변수로 전달된 $는 jQuery 의 별칭임을 나타낸다.

hoverTable을 사용하기 위하여 함수를 선언하여 보자.
    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
        };
    })(jQuery);

우선 이름은 hoverTable로 지었다.
특별히 설명할 부분은 없는듯 하니 다음으로 넘어가자.
다음은 매개변수은 option을 설정한다.
    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
        };
    })(jQuery);

위와 같은 방법으로 option의 값에 기본값을 설정하였다.
  • thead: thead 태그의 스타일
  • tbody : tbody 태그의 스타일
  • oddClass : tbody의 홀수 번째 tr의 스타일
  • evenClass : tbody의 짝수 번째 tr의 스타일
  • hoverClass : tbody의 마우스가 올라간 tr의 스타일
자.. 이제 매개변수 까지 지정 하였고 쭉쭉 진행해 보자.


    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
           
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
           
            return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
            });
        };
    })(jQuery);
   
위와 같이 return 을 사용하여 반복문 this.each 를 실행하면 jQuery 확장 집합을 반환 할 수 있다.


    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
           
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
           
            return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
                $(this).find('thead tr').addClass(options.thead); // 테이블 헤더 클래스 정의
                $(this).find('tbody').addClass(options.tbody); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(odd)').addClass(options.oddClass); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(even)').addClass(options.evenClass); // 테이블 헤더 클래스 정의
            });
        };
    })(jQuery);  
   
위의 추가된 4줄의 코드로 헤더와 body 의 홀수, 짝수 번째 줄의 스타일을 할당하였다.
기본적인 모양은 끝 났으니 이제 hover 동작을 넣어 보도록 하자.


    
    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
           
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
           
            return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
                $(this).find('thead tr').addClass(options.thead); // 테이블 헤더 클래스 정의
                $(this).find('tbody').addClass(options.tbody); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(odd)').addClass(options.oddClass); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(even)').addClass(options.evenClass); // 테이블 헤더 클래스 정의
                function hover(event){  // 마우스 over / out 동작 function 정의
                    $(event.target.parentNode).toggleClass(options.hoverClass);
                }
                $(this).find('tbody tr').mouseover(hover); // mouseover 이벤트 설정
                $(this).find('tbody tr').mouseout(hover); // mouseout 이벤트 설정
                
            });
        };
    })(jQuery);
위의 코드에서 mouseover, mouseout 이라는 두 jQuery Event Helfer Method를 사용하였다.
                $(this).find('tbody tr').mouseover(hover); // mouseover 이벤트 설정
                $(this).find('tbody tr').mouseout(hover); // mouseout 이벤트 설정
은 다음과 같이 수정이 가능하다.

$(this).find('tbody tr').hover(hover,hover);
 
 
웹접근성을 고려 하여 위의 기능에서 하나를 더 추가해보자.
일반적으로 토글 버튼의 경우 토글 된 상태에서는 기능이 변경이 된다.
따라서 이미지의 alt 태그의 값도 함께 변경이 되어야 한다.
옵션을 추가 하였다.
talt : 토글상태의 이미지 ALT 값.
 
(function($){
   
    $.fn.toggleImg = function(option){
       
        var options = $.extend( { 
            "tsrc" : null,
            "src" : null,
            "thover" : null,
            "hover" : null,
            "alt": null,
            "talt": null
        },option || {});
        var SetHover = function (obj,over, out)
        {
            if(over){
                obj.unbind("mouseover");
                obj.unbind("mouseout");
                obj.bind("mouseover",function(){
                    obj.attr("src",over);
                });
                obj.bind("mouseout",function(){
                    obj.attr("src",out);
                });
            }
        }
        return this.each(function(){
            var ele = $(this);
            if( options.src === null) {options.src = ele.attr("src");}
            if(options.alt === null){options.alt = ele.attr("alt");}
            SetHover(ele,options.hover,options.src);
           
            ele.toggle(function()
            {
                ele.attr("src",(options.thover)?options.thover:options.tsrc);
                if(options.talt !== null){
                    ele.attr("alt",options.talt);
                }

                SetHover(ele,options.thover,options.thover);
               
            },function()
            {
                if(options.talt !== null){
                    ele.attr("alt",options.alt);
                }
                ele.attr("src",(options.hover)?options.hover:options.src);
                SetHover(ele,options.hover,options.src);
               
            });
            return this;                
        });
      }
})(jQuery);
 
여기저기 바뀐곳이 있으나.. 빨간 부분만 보면 될 것 같다.
2009/08/07 21:32 2009/08/07 21:32

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다