제이쿼리(jQuery) 기초 문법

언어공부/JavaScript&jQuery

제이쿼리(jQuery) 기초 문법 - 플러그인 직접 제작, 자주 묻는 질문 플러그인 제작

yeony 2021. 8. 17. 21:54

플러그인 제작을 위한 $.fn.extend() 메소드

$.fn.extend()메소드는 개발자가 직접 제작한 함수를 jQuery에 확장 시켜 주는 역할을 한다. 다음은 $.fn.extend() 메소드의 기본형이다. $.fn.extend()메소드는 두 가지 방법으로 사용할 수 있다.

<script>

//첫 번째 방법
$.fn.extend({
	확장 함수명:function(매개변수1, 매개변수2, ...){
    	$(this); //플러그인을 적용한 요소를 가리킨다.
        자바스크립트 코드;
    }
});
$("요소 선택").확장 함수명(인자값1, 인자값2); //플러그인 적용

//두 번째 방법
$.fn.확장 함수명 = function(매개변수1, 매개변수2, ...){
	자바스크립트 코드;
}

</script>

자주 묻는 질문 플러그인 제작 예제

자주 묻는 질문(FAQ)에 사용할 수 있는 플러그인을 만들어보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자주 묻는 질문</title>
<script src="../js/jquery.js"></script>
<script>
$(function(){
	$.fn.extend({
	 faq:function(){
		var ts =$(this);
		$.each(ts,function(i,o){//faq플러그인을 적용한 요소의 개수만큼 함수를 실행함
			$("button",o).on("click",tabmenu);//faq 플러그인을 적용한 요소(o)에 포함되어 있는 버튼에 클릭 이벤트를 등록
			function tabmenu(){
				if($(this).parent().next().is(":hidden")){
					$("li>div:visible",o).hide();
					$(this).parent().next().show();
				}else{
					$("li>div:visible",o).hide();
				}
			}
		});
	 }
 });
	$(".faq").faq();
});
</script>
<style>
li {
	list-style: none;
}

li>div {
	display:none;
}

.cont{
	display:inline;
	background-color: yellow;
}
</style>
</head>
<body>
<h1>좋아하는 것 관련</h1>
<div class="faq">
	<ul>
	 <li>
	  <p><button>Q1. 좋아하는 색깔은?</button></p>
	  <div>
	   <div class="cont">노랑색, 남색, 보라색 입니다.</div>
	  </div>
	 </li>
	 <li>
	  <p><button>Q2. 좋아하는 과일은?</button></p>
	  <div>
	   <div class="cont"> 딸기, 바나나, 체리, 골드키위, 망고입니다.</div>
	  </div>
	 </li>
	</ul>
</div>
<h1>흥미있는 것 관련</h1>
<div class="faq">
	<ul>
	 <li>
	  <p><button>Q1. 흥미있는 분야는?</button></p>
	  <div>
	   <div class="cont">코딩 입니다.</div>
	  </div>
	 </li>
	  <li>
	  <p><button>Q1. 흥미있는 활동은?</button></p>
	  <div>
	   <div class="cont">산책, 여행 입니다.</div>
	  </div>
	 </li>
	</ul>
</div>
</body>
</html>

if문에서 클릭했던 부분의 div가 hidden이면 show()로 보여주고, 다른 visible인 div는 hide()로 숨기기 때문에, faq 클래스로 묶인 좋아하는 것 관련, 흥미있는 것 관련 부분은 Q를 한 개씩만 볼 수 있다. else문에서 클릭했던 부분이 hidden이 아니면 hide()로 다시 숨긴다.

저작자표시 비영리 변경금지