1. 제이쿼리 플러그인이란?
다양한 기능을 구현해놓은 제이쿼리 라이브러리이다. 여러 개발자가 기능을 구현해놓은 프로그램을 자바스크립트 파일로 제공한다. 따라서 사용하고자 하는 플러그인을 웹 문서에 연동하면 바로 사용할 수 있다.
(1) 플러그인 연동법
<head>
<script>
제이쿼리 라이브러리 연동
플러그인 연동
</script>
</head>(2) 플러그인 예제
-
제이쿼리 UI 플러그인
-
bxSlider 플러그인
-
jquery-cookie 플러그인
❓❓ 쿠키란, 사이트를 방문한 사용자의 소량의 브라우저 정보를 저장할 수 있는 공간이다.
쿠키를 이용해서 '오늘 하루동안 열지 않기' 기능이나 '최근에 본 상품' 기능을 구현할 수 있다.
2. jquery-cookie 플러그인 예제
마지막 예제인 jquery-cookie 플러그인 예제를 여기 정리해보려고 한다.
jquery-cookie 메소드 사용법
| 종류 | 예시 | 설명 |
|---|---|---|
| $.cookie("쿠키 이름", "쿠키 값", {expires: 만료일, path: "저장경로"}); | $.cookie("myName", "hello", {expires: 3, path :"/"}); | ✔ 쿠키 이름: "myName" ✔ 쿠키 값: "hello" ✔ expires 값: 3 (3일 후 자동 소멸) ✔ path 값: "/" (최상위 폴더에 저장) |
| $.cookie("쿠키 이름") | $.cookie("myName") | "myName"이라는 이름으로 저장된 쿠키의 값을 반환한다. |
| $.removeCookie("쿠키 이름") | $.removeCookie("myName") | "myName"이라는 이름으로 저장된 쿠키를 제거합니다 |
(1) jquery-cookie 플러그인 연동
<!-- cookie plugin 연동 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>(2) '3일 동안 이 창 열지 않기' 팝업창 띄우기
📌 크롬에서는 쿠키를 생성하기 위해서는 서버를 사용해야 한다.
📝JS파일
$(function(){
// 쿠키의 값이 none이면 창을 숨긴다.
if($.cookie("popup") == "none"){
$("#notice_wrap").hide();
}
// 닫기 버튼을 누르면, 체크박스 유무에 따라 쿠키를 생성하여 3일간 저장한다.
var $expChk = $("#expiresChk");
$(".closeBtn").on("click", closePop);
function closePop(){
if($expChk.is(":checked")){
$.cookie("popup", "none", {expires:3, path : "/"});
}
$("#notice_wrap").fadeOut("fast");
}
});📝html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<!-- cookie plugin 연동 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script src="js/cookie_ex.js"></script>
</head>
<body>
<div id="notice_wrap">
<img src = "img/제이쿼리.jpg" alt ="공지사항" width="300px">
<p class="closeWrap">
<input type="checkbox" name="expiresChk" id="expiresChk">
<label for="expiresChk"> 3일동안 이 창 열지않기</label>
<button class="closeBtn">닫기</button>
</p>
</div>
</body>
</html>(3) 생성된 쿠키 확인하기
개발자 도구를 열고 application패널에서 cookies를 눌러 해당 도메인을 선택하면 쿠키가 생성된 것을 알 수 있다.
3. 플러그인 직접 제작하기
다른 개발자들이 제작함 플러그인말고, 직접 플러그인을 제작하기 위해서는 $.fn.extend() 메소드를 사용해야 한다.
(1) $.fn.extend() 메소드
개발자가 직접 제작한 함수를 제이쿼리에 확장시켜주는 역할을 한다. 메소드의 기본형은 아래와 같이 대표적인 2가지 방법이 있다.
//첫번째 방법
$.fn.extend({
확장 함수명: function(매개변수1, ~){
$(this); //여기서 this는 플러그인을 적용한 요소를 가리킨다.
자바스크립트 코드;
}
});
//플러그인 적용
$("요소 선택").확장 함수명(인자값1, ~);
// 두번째 방법
$.fn.확장 함수명 = function(매개변수1, ~){
}(2) 자주 묻는 질문 플러그인 직접 제작해보기
📝JS파일
$(function(){
$.fn.extend({
faq: function(){
var ts = $(this);
// faq플러그인을 적용한 요소의 개수만큼 실행한다.
$.each(ts, function(i,o){
// faq 플러그인을 적용한 요소(o)에 포함되어있는 버튼에 클릭이벤트를 등록한다.
$("button",o).on("click", tabmenu);
function tabmenu() {
console.log($(this).parent().next());
if($(this).parent().next().is(":hidden")){
$("li>div:visible",o).hide();
$(this).parent().next().show();
}
else{
$("li>div:visible",o).hide();
}
}
});
}
});
$(".faq").faq();
});📝html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="js/question_ex.js"></script>
</head>
<body>
<h1>질문 제목1</h1>
<div class="faq">
<ul>
<li>
<p><button>Q1. 자주 묻는 질문 내용?</button></p>
<div>
<div class="cont">답변 내용1</div>
</div>
</li>
<li>
<p><button>Q2. 자주 묻는 질문 내용?</button></p>
<div>
<div class="cont">답변 내용2</div>
</div>
</li>
</ul>
</div>
<h1>질문 제목2</h1>
<div class="faq">
<ul>
<li>
<p><button>Q1. 자주 묻는 질문 내용?</button></p>
<div>
<div class="cont">답변 내용1</div>
</div>
</li>
<li>
<p><button>Q2. 자주 묻는 질문 내용?</button></p>
<div>
<div class="cont">답변 내용2</div>
</div>
</li>
</ul>
</div>
</body>
</html>
재미있는 아이디어 떠올리는 것을 좋아하고, 이를 구현하여 세상에 즐거움을 선물하고 싶은 사람입니다.