10. 제이쿼리(jQuery) 플러그인

jQuery의 강점 중 하나는 확장성이다.

기본 기능 외에도 다양한 기능을 플러그인 형태로 추가할 수 있다.

 

1. 제이쿼리 플러그인

플러그인은 jQuery 기능을 확장해주는 외부 라이브러리다.

• 슬라이드
• 달력
• 모달
• 애니메이션
• 쿠키 관리

등을 쉽게 구현할 수 있다.

플러그인은 jQuery 문법 체계를 그대로 따른다.

$("#slider").bxSlider();

 

2. 제이쿼리 UI 플러그인

1) 제이쿼리 UI 플러그인이란?

jQuery UI는 UI 관련 기능을 제공하는 공식 플러그인 모음이다.

① CDN 연동

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

 

② 주요 기능

• Draggable(드래그)
• Droppable(드롭)
• Datepicker(달력)
• Dialog(팝업창)
• Accordion(아코디언)
• Tabs(탭)

ex.

$("#date").datepicker();

 

3. bxSlider 플러그인

bxSlider는 이미지 슬라이드 구현 플러그인이다.

• 배너 슬라이드
• 자동 재생
• 좌우 이동
• 반응형 지원

기본 사용

<link rel="stylesheet" href="jquery.bxslider.css">
<script src="jquery.bxslider.min.js"></script>

$(function() {
  $(".slider").bxSlider({
    auto: true,
    pause: 3000,
    speed: 500
  });
});

 

옵션 예시

옵션	설명
auto	자동 재생
pause	정지 시간
speed	이동 속도
mode	horizontal / vertical / fade

 

4. jQuery-cookie 플러그인

쿠키를 쉽게 관리하기 위한 플러그인이다.

1) 쿠키 저장

$.cookie("username", "John", { expires: 7 });

2) 쿠키 읽기

$.cookie("username");

3) 쿠키 삭제

$.removeCookie("username");

 

5. 플러그인 직접 제작하기

jQuery는 직접 플러그인을 제작할 수 있다.

 

1) $.fn.extend() 메서드

$.fn은 jQuery의 프로토타입 객체다.

여기에 메서드를 추가하면 플러그인이 된다.,

 

① 기본 구조

$.fn.extend({
  highlight: function(color) {
    return this.css("background", color);
  }
});

사용

$(".box").highlight("yellow");

 

② 내부 동작 원리

 

• this → 선택된 요소 집합
• return this → 메서드 체이닝 가능

 

③ 체이닝 유지 예시

$.fn.extend({
  borderRed: function() {
    this.css("border", "2px solid red");
    return this;
  }
});

$(".box").borderRed().fadeOut();