Blog

jquery plugin 만들기

제이쿼리 플러그인 만들기 위해서는 제이쿼리의 prototype에 함수를 추가해야한다.
자바스크립트의 object객체의 prototype추가하는거와 비슷한 개념인듯.. 확실치 않다.
이를 위해서 플러그인의 전용 유효범위를 만들어 주어야한다.
그래야 다른 사람이 제이쿼리외의 목적으로 $를 사용할 경우에도 플러그인의 정상적인 작동을 보장할 수 있다.
(function($){
//플러그인 코드 삽입
})(jQuery);

다음으로 플로그인을 만든다.
$.fn은 jQuery.prototype 을 말하는 듯하다. 따라서
$.fn.myPlugin = function(options, callback) { … } 과 같이 만들면 메소드 체인을 통해 선태자와 함께 사용할 수 있게 준비가 된다.
하지만 위와 같이만 선언후 플러그인을 만들게 되면 선택한 모든 DOM에 대해서 플러그인이 작동하게 되므로
현재 선택된 DOM에서만 작동이 되도록 아래와 같이 작업을 해준다. (myPlugin 함수 안에 넣어주면 된다.)
return this.each (function(){ $(this).플러그인 실제 구현코드 });

그리고 위의 myPlugin함수의 options, callback 을 통해서 사용자가 값을 입력할 수 있는데
이를 위해서 몇가지 설정을 할 필요가 있다.
우선 사용자가 값을 입력하지 않았을 경우 개발자가 미리 설정해둔 값들이 들어가도록 객체리터럴로 default값을 설정해 준다.
$.fn.myPlugin.defaults = {
color:”#fff”,
background:”#000″,
complete:null
}
위에서 complete 값은 사용자 메소드를 넣을 곳으로 기본값은 null로 설정해준다
그리고 사용자가 입력한 값과 기본값을 더하기위해 $.extend 메소드를 사용한다.
options = $.extend($.fn.myPlugin.default,options);
$.extend 메소드를 사용하면 default 객체에 options을 추가한 객체를 반환하게된다.
추가한후 options.color 와 같은 방식으로 사용할 수 있다.

마지막으로 myPlugin 함수의 첫번째 파라미터로 콜백함수가 들어올경우
$.isFunction 메소드 사용으로 options가 함수인지 확인하여 함수가 아닐경우를 확인하여 콜백으로 사용할 수 있도록 해준다.
if($.isFunction(option))
{
callback = option;
option = null;
}

html 문서에 <script type=”text/javascript” src=”jwplugin.js”></script> 추가 후

선택자.메소드체인을 사용하여  jaewon(option,callback); 플러그인 사용

$(function(){

$(“a”).slideDown().jaewon({

background:”#ff0″,complete:function(){ alert(“A”); }

}, function(){ alert(“complete”);});

});

 

 

  • 풀잎

    어렵네요 ㅠㅠ 나중에 천천히 봐야겠습니다.