[Do it!] 10. 제이쿼리 플러그인
1. 제이쿼리 플러그인이란?
가전제품에 있는 플러그를 연상하면 이해하기 쉬움
전기 포트의 플러그를 콘센트에 꽂아야 전기 포트를 사용할 수 있는 것과 같이 제이쿼리 플러그인도 기능이 비슷
제이쿼리 플러그인은 여러 개발자가 드래그 & 드롭, 슬라이드 배너, 툴 팁 기능 등을 구현해 놓은 프로그램을 자바스크립트 파일로 제공하는 제이쿼리 라이브러리를 말함
제이쿼리 플러그인도 가전제품의 플러그처럼 내 웹 문서에 연동하면 바로 사용할 수 있음
제이쿼리 플러그인은 사용하고자 하는 기능의 플러그인을 검색하여 내려받고 웹 문서에 연동하여 선택한 요소에 기능(Method)만 적용하면 간단한 코드 삽입만으로도 복잡하고 어려운 기능을 쉽게 구현할 수 있음
거의 모든 플러그인에는 예제(Demo) 파일이 포함 => 예제를 참고하면 누구나 웹 문서에 어렵지 않게 플러그인 기능을 적용할 수 있음
플러그인 연동하기
플러그인은 제이쿼리를 이용하여 만든 소스
내려받은 플러그인을 HTML에 연동할 때는 제이쿼리 라이브러리 연동 태그 아래에 작성해야함
<head>
<script>
1) 제이쿼리 라이브러리 연동
2) 플러그인 연동
</script>
</head>
2. 제이쿼리 UI 플러그인 활용하기
UI(User Interface) 플러그인은 사용자 환경을 개발하는데 매우 유용한 메서드를 제공하는 플러그인
선택한 요소를 마우스로 이동시킬 수 있는 드래그, 요소가 펼쳐졌다가 줄어드는 아코디언 기능, 마우스를 올렸을 때 툴팁을 나타내는 기능 등 사용자 환경에 다양하고 편리한 기능을 쉽고 빠르게 적용시킬 수 있음
더 다양한 제이쿼리 UI는 https://jqueryui.com/ 에서 내려받아 사용할 수 있음
테마를 지정한 UI 플러그인 내려받기
자신의 개발 환경에 맞는 디자인 테마를 선택하여 내려받을 수 있음
1) 먼저 JQuery UI 사이트인 https://jqueryui.com/ 에 접속해, 필요한 메서드 다운로드
2) 자신에게 필요한 메서드 체크 => 커스터마이징 된 파일 저장
3) css, js, images 등등은 각각 알아서 본인 프로젝트 파일에 넣기
4) 제이쿼리 UI 사이트에서 [Demos] 버튼을 눌러 완성된 예제 미리 보기 페이지로 확인하여
필요한 기능 넣기
3.bxSlider 플러그인 활용하기
bxSlider 플러그인은 여러 개의 배너에 슬라이드 기능을 간편하게 적용할 수 있는 플러그인
모바일에도 최적화되어 있어 슬라이드 기능도 동일하게 동작 + 반응형도 최적화
bxSlider 플러그인 설치하기
1) bxSlider(https://bxslider.com/) 홈페이지에서 zip파일 다운로드 or CDN 설치
난 귀찮아서 그냥 CDN 으로~!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
4. jquery-cookie 플러그인 활용하기
jquery-cookie 플러그인을 사용하면 간편하게 쿠키(cookie)를 생성하고 쿠키 만료일을 설정할 수 있음
쿠키 : 사이트를 방문한 사용자의 소량의 브라우저 정보를 저장할 수 있는 공간을 말함
소량의 데이터를 저장할 수 있는 저장소를 쿠키 조각에 비유한 것
쿠키는 하나의 도메인 당 최대 20개를 생성할 수 있고 최대 4KB까지 저장할 수 있음
쿠키를 사용하면 '오늘 하루 동안 이 창 열지 않기'나 '최근에 본 상품' 기능을 구현할 수 있음
jquery-cookie 플러그인 설치
https://cdnjs.com/libraries/jquery-cookie
jquery-cookie - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
A simple, lightweight jQuery plugin for reading, writing and deleting cookies. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests ea
cdnjs.com
jquery-cookie 메서드 사용법
| 종류 | 예시 | 설명 |
| $.cookie("쿠키이름", "쿠키값", {expires:만료일, path:'저장경로'}); | $.cookie("myName", "hello", {expires:3, path:"/"}); | expires값 : 몇일 후 자동 소멸되는지 path 값 : 어디에 저장되는지 |
| $.cookie('쿠키이름'); | $.cookie('myName'); | 쿠키이름으로 저장된 쿠키의 값을 반환 |
| $.removeCookie("쿠키이름"); | $.removeCookie("myName"); | 쿠키이름으로 저장된 쿠키를 제거함 |
5. 플러그인 직접 제작하기
플러그인 제작을 위한 $.fn.extend() 메서드
$.fn.extend() 메서드는 개발자가 직접 제작한 함수를 jQuery에 확장시켜 주는 역할
//1번 기본형
$.fn.extend({
확장 함수명 : function(매개변수1, 매개변수2, ...){
$(this); //플러그인을 적용한 요소
자바스크립트 코드;
}
});
$("요소선택").확장 함수명(인자값1, 인자값2); //플러그인 적용
//2번 기본형
$.fn.확장 함수명 = function(매개변수1, 매개변수2, ...){
...
}