Making jQuery Plugin(3)

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

여기에는 두 가지 포인트가 있습니다. 첫 번째는 CSS 파일을 제공하지 않으므로 스타일을 내부에서 지정한다는 것이고, 두 번째는 옵션 객체를 제어하는 방법입니다. 첫 번째는 모두 아는 사항일 것입니다. 따라서 두 번째 내용을 주의 깊게 살펴보겠습니다.
아래 코드처럼 스타일과 옵션 객체를 지정합니다.

							jQuery.fn.pivot = function (options) {
								// 변수 선언
								var $target = $(this);
								var $items = $target.children();
								var $container = $target.wrap('
').parent(); var option = {width:500, height:450}; // 옵션 처리 $.extend(option, options); // 스타일 지정 $target.css({ width: $items.length*option.width, height: option.height, position: 'absolute' }); $items.css({ float: 'left', width: option.width, height: option.height }); $container.css({ overflow: 'hidden', position: 'relative', width: option.width, height: option.height }); }

두 가지 애매한 상항이 있는데요. 첫 번째는 wrap() 메서드와 parent() 메서드의 사용입니다. 이전에 이미지 슬라이드를 만들면서 캔버스와 구성 요소에 대해서 알아 봤습니다. Pivot 플러그인은 드래그해서 페이지를 넘기는 것 이외에 이미지 슬라이더와 매우 비슷합니다. 이미지 슬라이더를 만들 때 캔버스를 만들었고, 이미지를 담는 div 태그를 만들어 div 태그를 이동해 화면 전환 효과를 만들었습니다. 현재 body 태그를 보면 캔버스 내부의 구성 요소만 있지 캔버스가 없습니다. 사용자가 쉽게 플러그인을 사용할 수 있게 캔버스는 플러그인에서 자체적으로 만들어 주는 것입니다. wrap() 메서드를 사용해 id가 pivot_slider인 div 전체를 새 div로 감싼 형태로 문서 객체를 구성하고 외부의 div 태그를 parent() 메서드를 사용해 변수 $container에 넣습니다.

두 번째로 이해가 되지 않는 수 있는 부분은 변수 option과 매개 변수 options입니다. option은 기본 옵션 객체이고, options는 사용자로부터 입력받은 옵션 객체입니다. 이와 같이 내부에서 변수 option을 지정하고 매개 변수 options와 결합해 속성을 지정하므로 width 속성이나 height 속성을 입력해도 되고, 입력하지 않아도 되는 옵션입니다. 옵션 객체를 합치는 방법은 다음과 같이 $.extend() 메서드를 사용합니다.

								var option = {width:500, height:450};

								// 옵션 처리
								$.extend(option, options);

						

옵션 객체를 처리하는 방법은 꼭 플러그인을 만드는 경우가 아니더라도 굉장히 많이 사용하므로 꼭 기억해 주세요.