[jQuery] 플러그인 만들기 (2) 기본값 설정

2010년 6월 6일

javascript, 프론트엔드

플러그인을 만들 때 파라미터를 맵 형태(혹은 객체 형태)로 받으면 제어하기 편하다.

일단 파라미터가 각각 뭘 의미하는지 헷갈리지 않아도 된다. 맵 형태는 key값이 있기 때문이다.(혹은 레이블이라고도 말하더라.) 또한, 파라미터 순서 때문에 골치아플 일도 없다.

자, 한 번 해 보자.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	jQuery.fn.customFn = function(opt){

	  return this.each(function(){

	    $(this).css({

	      position : opt.position,

	      zIndex: opt.zIndex,

	      opacity: opt.opacity

	    });

	  });

	}
	var option = {

		position : 'relative',

		zIndex : 0,

		opacity: 0.5

	};
	$('.test').click(function(){

		$('#log').customFn(option);

	});

});

</script>

<style>

#log{

	background: black;

	color: white;

	position: absolute;

	left: 20px;

	top: 100px;

	padding: 20px;

}

</style>

<div id="log">

	wow!!!

</div>

<input type="button" class="test" value="test"/>

이번에는 기본값을 만들어 보자. 기본값 역시 객체 형태로 function 안에 넣는다. 만약 기본값을 변경하기 쉽게 할 생각이라면 function 밖으로 빼도 무방할 것이다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	jQuery.fn.customFn = function(opt){
	  return this.each(function(){
	    $(this).css({
	      position : opt.position,
	      zIndex: opt.zIndex,
	      opacity: opt.opacity
	    });
	  });
	}

	var default = {
		postion : 'relative',
		zIndex: 2,
		opacity: 0.1
	};

	var option = {
		position : 'relative',
		zIndex : 0,
		opacity: 0.5
	};

	var opt = $.extend(default, option);

	$('.test').click(function(){
		$('#log').customFn(option);
	});
});
</script>
<style>
#log{
	background: black;
	color: white;
	position: absolute;
	left: 20px;
	top: 100px;
	padding: 20px;
}
</style>
<div id="log">
	wow!!!
</div>
<input type="button" class="test" value="test"/>

이상이다.