jquery 플러그인 만들기 및 사용하기

플러그 인 이란?

 플러그인은 javascript 를 좀더 쓰기 편하게 하기위해 만들어진 언어 jquery 의 주요 요소중 하나 입니다. javascript 의 몇몇 자주 사용되는 코드들을 손쉽에 이벤트로 선언 하여 사용 할수 있게 해주는 아주 좋은 기능중의 하나 입니다. 허나 이 기능을 쓸줄만 알고 만들줄 모르면.. 그냥 쓰기만 하게 되는 것이죠

 

이제 그 플러그인을 만드는 것을 알려 드리겠습니다.

 

기본적으로 플러그인의 구조에 대해 서는 인터넷에 검색하면 이글보다 좋은 글들이 많으니 확인 하시기 바랍니다.

제가 여기에 따로 글을 쓰는 이유는 그 인터넷에 검색 해서 나오는 플러그 인이라는 것들이 막상 어떻게 써야 하는지 막막하게 느껴지지 않도록 하기 위함 입니다.

 * 플러그인을 만들 js 파일을 하나 생성 하세요 이름은 알아서..

 * $.fn.extend({ }); 우선 이와같이 fn 종속으로 추가를 합니다.

 * $.fn.extend({

testevent : function(){  // testevent 는 .event() 입니다.

alert("test");

 }

     });

 js 상에서

* $(document).ready(function(){

 $(this).testevent(); // 생성한 testevent 를 호출 합니다.

});

형식으로 사용 하면 해당 testevent를 사용 할 수 있습니다.

 

* 참고로 이와 같이 플러그인 참조를 선언해 줘야 합니다.

(저의 플러그인 파일 명은 jquery.test.js 입니다.)

 <script  type ="text/javascript" src="jquery.test.js"></script>

 

위와 같은 구조로 코딩 하였다면 응용을 해보겟습니다.

 

플러그인또한 어찌 되엇던 jquery 입니다.

그럼 페이지에 속한 jquery 에서 플러그인에 값을 전달하기 위해서는 .event ( value) 를 넣어주면 됩니다.

 

 * $.fn.extend({

testevent : function(id,val){  // 2개의 값을 받습니다. id 와 val 값을 받습니다.

alert("test");

 }

     });

js 에서는

* $(document).ready(function(){

 var testid = "#test";

var testval ="테스트";

 $(this).testevent( testid, testval); // 2가지의 값을 전달합니다.

});

플러그인에서 2가지 값을 받기 때문에 js 에서도 2가지 전달해 줘야 합니다...

testevent 가 호출 되면 해당 값을 전달하며 해당 이벤트에서 처리를 진행 하게 됩니다.

 

* 참고로 플러그인 내 에서는 this 를 사용하게 되면 jquery 를 부르게 됩니다 . 해서

클라이언트측의 this 를 전달하고자 한다면 js 에서 this.~~ 를 사용해 플러그인 으로 해당 값만 던져 주어 사용할수 있습니다.

 

* 한가지 주의 사항은 플러근의 제작 목적은 어디에서나 값을 넣어주면 사용 할 수 있게 하기위함이기 때문에 특정 위치에 특정 코드 형태로 사용 할 경우 플러그인 사용이 불가능 하게 됩니다.

 

따라서 코드 통합 작업이 필요 하게 되며 이는 플러그인을 만드는 것보다 더 어려운 작업이 될 수도 있습니다.

 

저의 경우는 코드 통합보다 플러그인 제작에 어려움을 느꼈습니다.

 

예제로 이전 포스팅에서 사용한 스크롤 이벤트를 플러그인으로 만들었습니다.

 

* js

  $(window).scroll(function () {
    option = $("input[id='optiononoff']").is(":checked");  체크 박스 on off 여부
    classname = ".notic";
    $(".notic").scrollevent(classname, option, this.scrollY, 387, 40, 140);  // 플러그인 호출
    //ID , 옵션 여부, this.scrollY,기본높이, 이전div높이, 변경된div높이
});

 

* 플러그인

$.fn.extend({
  scrollevent: function (id, checkonoff, scrolly, baseheight, point1, point2) {
        if (checkonoff == false) {
            if (scrollY >= baseheight - point1) { // 전
                $(id).css("position", "fixed");
                $(id).css("top", point1 + "px");
            }
            else if (scrollY < baseheight - point1) { // 후
                $(id).css("position", "absolute");
                $(id).css("top", baseheight + "px");
            }
        }
        else if (checkonoff) {
            if (scrollY >= baseheight - point2) { // 전
                $(id).css("position", "fixed");
                $(id).css("top", point2 + "px");
            }
            else if (scrollY < baseheight - point2) { // 후
                $(id).css("position", "absolute");
                $(id).css("top", baseheight + "px");
            }
        }
  }
});