플러그인형태로 개발하기.

쉽습니다.

$.fn.{플러그인명} = function() {}

선언하고

제이쿼리 어디에서든 $.{플러그인명} 으로 호출이 가능하다.

모를땐 몰랐지만 알고나면 탁!

/*-----------------------------------------------------------------------------+
| auther : insung
+-----------------------------------------------------------------------------*/
$(function() {
 
    $.fn.pd_toggle = function() {
        var container = this; // 배열로 로드됨
        
        if(container.length == 0)
        {
            return false;
        }
 
        var targetArr = [];
 
        for(var loop = 0; container.length > loop; loop++) // for돌리면서 각각의 스크립트 생성
        {
            var obj = $(container[loop]);
 
            targetArr[loop] = {
                'loop':loop
                ,'obj':obj
                ,'objItem':$(obj.attr('pd-toggle-item'))
                ,'objClose':$(obj.attr('pd-toggle-item')).find(obj.attr('pd-toggle-close'))
                ,'env':{
                    'auto':obj.attr('pd-toggle-auto')
                }
                ,init:function(){ // this는 targetArr[loop]이
                    var target = this; // this를 global로 사용하기 위해 별도로 생성
 
                    target.obj.click(function(){
                        target.objItem.show('fast');
                    });
 
                    target.objClose.click(function(){
                        target.objItem.hide('fast');
                    });
 
                    if(target.env.auto != 'false' && target.env.auto != 'n' && target.env.auto != '0')
                    {
                        target.objItem.mouseenter(function(){
                            $(this).mouseleave(function(){
                                target.objItem.hide('fast'); // this를 target으로 사용
                            });
                        });
                    }
                }
            };
 
            targetArr[loop].init(); // 스크립트 생성 후 init
        }
    }
 
    $('*[pd-toggle-item]').pd_toggle(); // dom 객채중 attr여부 확인해서 플러그인 호출함
});

1. 펑션을 만들고

$(function() {

$.fn.pd_toggle = function() {      어쩌구 저쩌구 내용들       }});

});

2. 제이쿼리를 셀랙트 이벤트를 통해 펑션을 호출 하면 끝!

$(function() {

$('*[pd-toggle-item]').pd_toggle();

});