Making jQuery Plugin(2)

피벗 슬라이드 플러그인 만들기

피벗 슬라이드는 마우스나 터치 이벤트를 사용해 화면의 내용을 넘기는 기능입니다. 모바일 네이버와 모바일 다음의 메인 화면에 사용됐습니다. 모바일에서 자주 볼 수 있는 기능이므로 어떠한 것인지 금방 이해할 수 있을 것입니다.

지금부터 Pivot 플러그인이라는 이름으로 피벗 슬라이드를 구현하는 플러그인을 만들어봅시다. 우선, 플러그인을 만들 때는 다음 네 가지 요소를 기본으로 생각해야 합니다.

  1. ◈ CSS 파일을 제공할 것인가?
  2. ◈ 플러그인을 적용할 대상 태그는 무엇인가?
  3. ◈ 어떠한 메서드를 제공할 것인가?
  4. ◈ 어떠한 옵션을 제공할 것인가?

이와 같은 요소는 머리속으로만 생각하는 게 아니라 별도의 문서로 만들어야 배포 시 다른 개발자가 쉽게 이용할 수 있습니다. 일단, 우리가 만들 플러그인은 간단한 플러그인이므로 별도의 CSS 파일은 제공하지 않습니다.

Pivot 플러그인은 아래의 예제 코드 구성의 div 태그에 적용할 것입니다. 외부의 div 태그에 Pivot 플러그인을 적용하면 내부에 있는 div 태그를 각각 하나의 페이지로 피벗할 수 있게 만들 것입니다.

							<div id="pivot_slider" >
								<div></div>
								<div></div>
								<div></div>
								<div></div>
							</div>
						

Pivot 플러그인을 적용하는 메서드는 다른 플러그인처럼 플러그인의 이름과 같게 만듭시다. Pivot 플러그인의 핵심 메서드는 아래 표의 pivot() 메서드로 만듭니다.

Pivot 플러그인의 메서드

Pivot 플러그인의 메서드
메서드 이름 설명
pivot() 피벗 플러그인을 적용합니다.

우리가 만들 플러그인은 아래 표의 옵션을 입력받아 사용합니다.

Pivot 플러그인의 메서드

Pivot 플러그인의 메서드
메서드 이름 설명
width() 각 페이지의 너비를 지정합니다.
height() 각 페이지의 높이를 지정합니다.

이렇게 어느 정도 간단하게 정리하니 그럴 듯해 보이죠? 이제 HTML 페이지를 아래 코드처럼 구성하고 본격적으로 Pivot 플러그인을 만들어 봅시다.

							<head>
								<script src="http://code.jquery.com/jquery-1.7.js"></script>
								<script>
									jQuery.fn.pivot = function (options) {

									};
								</script>
								<script>
									$(document).ready(function () {
										$('#pivot_slider').pivot({
											width: 700,
											height: 450
										});
									});
								</script>
							</head>
							<body>
								<div id="pivot_slider">
									<div>
										<h1>Lorem ipsum dolor sit amet</h1>
										<img src="Desert.jpg" />
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</div>
									<div>
										<h1>Fusce eleifend</h1>
										<img src="Hydrangeas.jpg" />
										<p>Fusce eleifend, massa at elementum ultrices.</p>
									</div>
									<div>
										<h1>Donec venenatis mattis elit.</h1>
										<img src="Jellyfish.jpg" />
										<p>Donec venenatis mattis elit. Etiam suscipit.</p>
									</div>
									<div>
										<h1>Phasellus sagittis quam mi.</h1>
										<img src="Koala.jpg" />
										<p>Phasellus sagittis quam mi. Ut non neque a tellus laoreet.</p>
									</div>
								</div>
							</body>