Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

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

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


일단 파라미터가 각각 뭘 의미하는지 헷갈리지 않아도 된다. 맵 형태는 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"/>

이상이다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다