제이쿼리 플러그인 만들기 (jQuery Plugin)
제이쿼리(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: 5004: };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.js2: $.fn.mySlide = function (options) {3: var defaults = {4: DELAY: 2000,5: FADE_SPEED: 5006: };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);
출처: http://dotweb.tistory.com/216 [절대로 고개를 떨구지 말라. 고개를 치켜들고 세상을 똑바로 바라보라.]