Making jQuery Plugin

지금까지 여러 종류의 jQuery 플러그인을 살펴봤습니다. 플러그인의 코드 자체는 굉장히 복잡하지만 한번 만들면 쉽게 재사용할 수 있습니다.
여기서는 플러그인을 만드는 방법을 배우고 직접 만들어 봅니다.

선택자를 사용하지 않는 jQuery 플러그인 생성

이제껏 살펴본 플러그인 중에 선택자를 사용하지 않는 플러그인이 몇 개 있습니다. 예를 들어 FancyBox 플러그인의 전역 메서드는 별도의 선택자를 사용하지 않습니다. 이처럼 선택자를 사용하지 않는 플러그인은 아래 코드 처럼 생성합니다. 간단하게 jQuery 객체에 메서드를 추가하면 됩니다.

							jQuery.reload = function () {
								// 작성될 내용.	
							};
						

아래의 예제 소스 처럼 reload 플러그인을 만들어 봅시다. 현재 페이지를 새로고침하는 플러그인입니다. 사실, 딱히 만들어야 하는 플러그인은 아니지만, 간단히 연습하는 것으로 작성했습니다. 플럭그인을 만든 후에는 아래 코드 처럼 사용할 수 있습니다.

							jQuery.reload = function () {
								// 페이지를 새로 고침
								location = location;
							} 
							$(function(){
								$("#exec01").click(function () {
									$.reload();
								})
							});
						


간단한 내용입니다. 물론, 일반 함수로 만들어 사용해도 되지만, 대부분의 사람이 jQuery를 사용하면 무엇인가 굉장히 쉽다는 느낌을 많이 받는 이상한 특징이 있습니다. 플러그인을 만들 때 중요하게 사용될 수 있으므로 꼭 기억해 주세요.



선택자를 사용하는 jQuery 플러그인 생성

선택자를 사용하지 않는 플러그인은 배우지 않아도 생각할 수 있는 부분이지만, 선택자를 사용하는 플러그인은 배우지 않으면 만들 수가 없습니다. 선택자를 사용하는 플러그인을 만들려면 아래 코드 처럼 jQuery 객체의 fn 속성에 메서드를 추가합니다.

							jQuery.fn.myPluginMethod = function (options) {};
						

생성한 플러그인 메서드 내부에서 this 키워드는 선택자로 선택한 대상을 의미합니다. 아래의 예제 코드처럼 간단하게 스타일을 변경하는 플러그인을 만들어 봅시다.

HEADER 5 A
HEADER 5 B
							jQuery.fn.myCustomMethod = function (options) {
								$(this).css("color","white");
								$(this).css("background","black");
							}

							$(function(){
								$("#exec02").click(function () {
									$("h5", "div.desc").myCustomMethod();
								})
							});
						

myCustomMethod() 메서드는 객체의 스타일을 벼경하는 플러그인이므로, 상기의 예제코드를 실행하면 글자색과 배경색이 변경됩니다.
플러그인을 만드는 방법이 딱히 어렵지 않습니다. jQuery를 사용하면 이렇게 아주 간단하게 플러그인을 만들 수 있으므로, 다른 자바스크립트 프레임워크에 비해 플러그인이 굉장히 많습니다.

피섯 슬라이드 플러그인만들기 (1)