jQuery 기본 플러그인 만들어 보기

 jQuery 는 매우 사용하기 쉬운 인터페이스를 제공하면서 관련 플러그인 역시 만들기 쉽게 해놓은 javascript  프레임워크 입니다.

여기서는 간단하게  jQuery 의 플러그인을 만들어 보겠습니다.

jQuery.fn.myPlugin = function() {
 
// 플러그인 내용이 들어갈 곳

};

 위의 코드는 기초적인 myPlugin 이라는 이름으로 만든 플러그인 폼입니다. 하지만 역시 jQuery 에서는 $을 써주는게 더욱 자연스러워 보입니다. 위의 코드는 아래와 같이 수정할 수 있습니다.

(function( $ ){
  $.fn.myPlugin = function() {


  };
})( jQuery );

 에서는 바로 jQuery 로 이미 요소를 받아서 $ 으로 처리 하기 때문입니다. 또한 위의 함수에서 만약 $($("#elementID")) 라고 사용할경우 $(this) 와 같습니다.

간단히 제가 만든 예제코드를 보겠습니다.

코드의 목적은 플러그인이 적용된 요소를 클릭할 경우 fadeOut 을 하는 플러그인 입니다. 

(function( $ ){
  //플러그인 정의 부분
  $.fn.fadeInToggle = function(){
	   $(this).click(function(){
		   $(this).fadeOut(100);
	   });
  };
  
})( jQuery );

아래는 적용 코드 입니다.

HTML

    

        
Box1
        
Box2
        
Box3
        
Box4
        
Box5
        
Box6
   

CSS

#exampleBox ul li{
    height:30px;
    width:30px;
    background-color:gray;
}

Javascript

 (function( $ ){
  //플러그인 정의 부분
  $.fn.fadeInToggle = function(){
	   $(this).click(function(){
		   $(this).fadeOut(100);
	   });
  };
  
})( jQuery );

$(document).ready(function(){
   $("#exampleBox ul li").fadeInToggle();
});

아래의 예제는 위의 예제 코드를 적용한 결과 입니다.

• Box1
• Box2
• Box3
• Box4
• Box5
• Box6

 코드에 대해 간단히 설명드리자면 $(document).ready(function(){ 적용 함수들 }); 는 도큐먼트가 모두 준비 되었을때 내부의 함수들을 적용 시킨다는 의미이며 플러그인의 $().click(); 은 클릭이 발생했을경우 $().fadeOut(); 은 fadeOut 시키라는 것을 의미합니다. 또한 this는 위에서 설명했던 것처럼 $("#exampleBox ul li") 를 오브젝트로 가져 온것을 의미합니다.

 추가로 위의 코드에서 this 는 $().click(); 과 같이 쓰였기 때문에 특정 클릭 요소를 가리킵니다. 따라서 ul li 중에서도 클릭된 한 요소를 의미하며 ul li 중에서도 클릭된 한 요소만 사라질수 있는 것 입니다.