티스토리 뷰

프로그래밍/JavaScript Web App

제이쿼리 플러그인 만들기 (jQuery Plugin)

쇠주는참이슬 2015. 2. 9. 15:18



제이쿼리(jQuery)를 이용하여 나만의 Custom Plugin을 만들어 봅시다.

아주 다양한 방법으로 만들 수 있지만 기본적으로 짚고 넘어가야할 부분.

그리고 공통적으로 사용되는 부분들에 대해서 이야기 하도록 하겠습니다.


아래 CSS와 HTML 코드를 가지고있는 객체에 대해서 슬라이드쇼 기능을 지원하는 플러그인을 만들어 보겠습니다.


   1:  <style>
   2:          #slideshow img
   3:          {
   4:              display: none;
   5:              position: absolute;
   6:              width:300px;
   7:              height:300px;
   8:          }

   9: </style>


   1:    <div id="slideshow">
   2:                  <img src="1.png" alt="JavaScript" />
   3:                  <img src="2.png" alt="CSS" />
   4:                  <img src="3.png" alt="JS" />
   5:                  <img src="4.png" alt="JAVA" />

   6:    </div>


div 컨테이너 객체에 있는 4개의 이미지를 슬라이드 하는 기능을 구성해 봅니다.

먼저 DOM ELEMENT 에 반응하는 공통 함수를 정의합니다. 여기서는 mySlide 라고 정의하겠습니다.


mySlide.js 파일을 생성하고 아래와같이 코드를 입력하면 DOM ELEMENT 에 반응하는 이벤트가 만들어집니다.

$("#slideshow").mySlide(); 를 입력하면 아래 function 으로 이벤트가 발생


   1:  (function () { 
   2:      $.fn.mySlide = function (options) {
   3:       
   4:      };
   5:  })(jQuery);


자 그러면 여기서 중요한 부분 제이쿼리에는 $.extend 라는 이벤트 속성이 있습니다.
두개 이상의 객체를 합치는 기능을 가지고 있는데 사용자 플러그인을 만들때 꼭 필요한 속성입니다. 자세한 기능은 jquery 홈페이지를 참조하고,
다음 기능으로 진행하겠습니다.

슬라이드 쇼를 진행하기 위해서 필요한 인자값을 defaults 라는 변수에 담습니다.
그리고 하단에 $.extned 를 보면 mySlide 함수를 선언했을때 파라미터로 들어오는 option 값을 넣어주는데,
이는 곧 mySlide()를 호출하면 defaults 값으로 사용하고, 인자값이 있으면 그 인자값(options)으로 사용하라는 의미입니다.


   1:  var defaults = {
   2:              DELAY: 2000,
   3:              FADE_SPEED: 500 
   4:          };
   5:   
   6:  var options = $.extend({}, defaults, options);


자 그러면 준비는 다됐고 이제 슬라이드쇼를 진행하는 코드를 짜보면 아래와같습니다. (간단해서 설명은 패스..)

   1:          var element = $(this);
   2:          var image = element.children('img');
   3:          var count = image.length;
   4:   
   5:          var i = 0;
   6:   
   7:          // 첫번째 이미지 활성화
   8:          image.eq(0).show();
   9:   
  10:           
  11:          // 이미지 슬라이드 타이머
  12:          var interval = setInterval(function () {
  13:              image.eq(i).fadeOut(options.FADE_SPEED);
  14:              i = (i + 1 == count) ? 0 : i + 1;
  15:              image.eq(i).fadeIn(options.FADE_SPEED);
  16:          }, options.DELAY);



HTML 페이지에서 이제 내가 만든 mySlide를 호출해 볼까요?


   1:     <script>
   2:          $(document).ready(function () {
   3:              $('#slideshow').mySlide({
   4:                  DELAY: 1000,
   5:                  FADE_SPEED: 500 
   6:              });
   7:          }); 
   8:      </script>


이렇게 하면 각 이미지들이 2초에 한번씩 슬라이드 됩니다. 
여기서 파라미터를 전달하지 않고 $('#slideshow').mySlide(); 를 하면 위에서 설명한 $.extend 에 defaults 값이 적용이 되고,
위에 코드처럼 인자값을 넘기면 위에 인자값(1초)으로 적용됩니다.

그냥 끝내긴 아쉬우니 이벤트를 같이 한번 넣어보도록 하죠.

mySlide.js 파일에 아래 코드를 추가합니다.

HTML 페이지에서 각 이미지를 클릭할때마다 해당 정보를 리턴해주는 함수를 생성합니다.

$.extend 로 정의된 options.노출시킬함수명.call(자기자신, 보낼인자값1, 보낼인자값2, 보낼인자값3)


   1:    // MOUSE_CLICK 노출
   2:          $(image).on("click", function(evnet){            
   3:              options.MOUSE_CLICK.call(this, this, event.clientX, event.clientY);
   4:      })


다시 HTML 파일로 돌아가서 mySldie를 아래와 같이 호출해보면 

위에서 정의한 이벤트와 함께 파라미터를 전달받습니다.


   1:      <script>
   2:          $(document).ready(function () {
   3:              $('#slideshow').mySlide({
   4:                  DELAY: 2000,
   5:                  FADE_SPEED: 500,
   6:                  MOUSE_CLICK: function (item, x, y) {
   7:                      var element = $(item).attr("alt");
   8:                      alert(element + "\n" + "X : " + x + "   Y : " + y);
   9:                  }
  10:              });
  11:          }); 
  12:      </script>


실행해보면 각각의 이미지의 alt 명, 클릭한 X, Y 좌표를 확인할 수 있습니다.

이런 구조로 기능을 추가하다보면 훌륭한 나만의 제이쿼리 플러그인을(jquery plugin) 만들 수 있습니다.




아래 풀소스 입니다.


HTML

1:   
   2:  <!DOCTYPE html>
   3:   
   4:  <html xmlns="http://www.w3.org/1999/xhtml">
   5:  <head>
   6:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   7:      <title></title>
   8:         <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
   9:         <script type="text/javascript" src="mySlide.js"></script>
  10:          
  11:      <script>
  12:          $(document).ready(function () {
  13:              $('#slideshow').mySlide({
  14:                  DELAY: 2000,
  15:                  FADE_SPEED: 500,
  16:                  MOUSE_CLICK: function (item, x, y) {
  17:                      var element = $(item).attr("alt");
  18:                      alert(element + "\n" + "X : " + x + "   Y : " + y);
  19:                  }
  20:              });
  21:          }); 
  22:      </script>
  23:      <style>
  24:          #slideshow img
  25:          {
  26:              display: none;
  27:              position: absolute;
  28:              width:300px;
  29:              height:300px;
  30:          }
  31:       </style>
  32:   
  33:  </head>
  34:  <body>
  35:      <form>
  36:      <div>
  37:              <div id="slideshow">
  38:                  <img src="1.png" alt="JavaScript" />
  39:                  <img src="2.png" alt="CSS" />
  40:                  <img src="3.png" alt="JS" />
  41:                  <img src="4.png" alt="JAVA" />
  42:              </div>
  43:      </div>
  44:      </form>
  45:  </body>
  46:  </html>

mySlide.js

   2:      $.fn.mySlide = function (options) {
   3:          var defaults = {
   4:              DELAY: 2000,
   5:              FADE_SPEED: 500 
   6:          };
   7:   
   8:          var options = $.extend({}, defaults, options);
   9:   
  10:          var element = $(this);
  11:          var image = element.children('img');
  12:          var count = image.length;
  13:   
  14:          var i = 0;
  15:   
  16:          // 첫번째 이미지 활성화
  17:          image.eq(0).show();
  18:   
  19:          // MOUSE_CLICK 노출
  20:          $(image).on("click", function(evnet){            
  21:              options.MOUSE_CLICK.call(this, this, event.clientX, event.clientY);
  22:          })
  23:          
  24:   
  25:          // 이미지 슬라이드 타이머
  26:          var interval = setInterval(function () {
  27:              image.eq(i).fadeOut(options.FADE_SPEED);
  28:              i = (i + 1 == count) ? 0 : i + 1;
  29:              image.eq(i).fadeIn(options.FADE_SPEED);
  30:          }, options.DELAY);
  31:      };
  32:  })(jQuery);


저작자표시

'프로그래밍 > JavaScript Web App' 카테고리의 다른 글

배열을 유니크하게 골라내기 (배열중복제거)  (0) 2015.03.31
Function Declarations(함수선언) vs Function Expressions(함수표현) (함수호이스팅 hoisting)  (0) 2015.03.09
클로져(Closures) 심화  (0) 2015.02.04
<![CDATA[ 섹션에 대해서  (0) 2015.02.04
window.load VS document.ready  (0) 2015.02.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함