jQuery 제이쿼리 플러그인 - jquery UI Library, jquery bxSilder, jquery-cookie
Javascript/JQuery 2020. 4. 24. 14:10plug-in이란 다양한 기능을 구현해 놓은 라이브러리입니다. 종류는 매우 다양하며, 제이쿼리 플러그인을 내려받아 연동하면 구현하기 귀찮거나 어려운 기능들을 쉽고 간단하게 사용할 수 있습니다. 제이쿼리 플러그인은 HTML DRIVE 와 BEST jQuery 등에서 내려받을 수 있습니다.
제이쿼리 플러그인
가전제품 중 예를 들면 전기포트의 플러그를 콘센트에 꽂아야 전기포트를 사용할 수 있는 것 처럼 제이쿼리의 플러그인도 유사합니다. 제이쿼리 플러그인은 개발자들이 드래그 앤 드롭, 슬라이드 배너, 툴팁 등의 기능을 구현해 놓은 프로그램을 자바스크립트 파일로 제공하는 제이쿼리 라이브러리입니다.
사용하고자 하는 기능의 플러그인을 검색해 내려받고 웹 문서에 연동하여 선택한 요소에 기능(Method)만 적용하면 간단한 코드 삽입만으로도 복잡하고 어려운 기능을 쉽게 구현할 수 있습니다. 상업적 사용을 앞둔다면 license 내용을 잘 확인하는 것이 좋습니다. 보통 플러그인 문서 상단에 표기되어 있고, 내용을 반드시 코드에 포함해 사용해야 합니다. 무료로 사용할 수 있는 저작권 종류입니다.
- 자유 수정 가능 : MIT, BSD, Apache, Public Domain, Free
- 수정 시 부분 공개 : LGPL, MPL
제이쿼리 플러그인은 제이쿼리를 이용하여 만든 소스이기 때문에 내려받은 후 HTML에 연동할 때 제이쿼리 라이브러리 연동 태그 아래에 작성해야 합니다. 순서가 뒤바뀌면 잘 읽지 못합니다.
<script>
1. 제이쿼리 라이브러리 연동
2. 플러그인 연동
</script>
제이쿼리 UI 플러그인 다운로드 및 활용 예제
User Interface, UI 플러그인은 선택한 요소를 마우스 드래그하는 기능, 요소를 펼쳤다 접는 아코디언 기능, 요소에 마우스를 hover하면 텍스트가 있는 작은 정보 창을 띄우는 툴팁 기능 등 사용자 환경을 개발하는데 유용한 메서드들을 제공합니다. 다운로드는 jqueryui에서 받을 수 있습니다.
이번 예제는 레이어 팝업에 드래그 기능을 적용시켜 보겠습니다. 사이트에서 먼저 디자인 테마와 갤러리를 선택하고, 다운로드 페이지로 이동 뒤 자신에게 필요한 메서드만 체크하고 다운로드합니다. 그러면 css, html, js 등의 파일로 구성된 압축 파일을 받을 수 있습니다. 직접 스타일을 작성할 경우 생략해도 되는 부분입니다. 또한 테마와 갤러리 선택 없이 전체를 내려받아도 됩니다. bad gate way가 떠서 그냥 전체를 다운로드했습니다. 제이쿼리 UI 사이트의 상단 메뉴의 Demos 에는 완성된 예제를 미리 보고 참고할 수 있습니다.
제이쿼리 UI 플러그인으로 드래그 레이어 창 만들기
예제와 관련된 기능은 Draggable이라는 기능입니다. 데모 source code 또한 볼 수 있습니다. 그러면 레이어 팝업 창을 만들고 드래그 기능을 적용해보겠습니다. draggable() 메서드를 선택한 요소에 적용하면 됩니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(function(){
$(".layer_popup").draggable();
});
</script>
<style>
.layer_popup{
position: absolute;
left: 50px;
top: 50px;
cursor: move;
}
</style>
</head>
<body>
<div class="layer_popup">
<img src="https://media.giphy.com/media/VbtNupSNqUPsTcNBFY/giphy.gif" alt="">
</div>
</body>
</html>
제이쿼리 UI 플러그인으로 날짜 설정 달력 만들기
호텔 예약이나 항공권 발권 시스템 등에 사용할 수 있는 기능입니다. Demo를 사용한다면 Demo -> Datepicker 에서 골라봅니다. Restrict date range의 달력 예제를 참고합니다. 이 옵션은 선택 가능한 날짜 범위를 minDate 및 maxDate 옵션으로 제한할 수 있습니다. 소스는 view source 링크를 클릭하면 펼쳐집니다.
참고하여 특정 날짜만 선택을 허용하는 달력 코드를 짜보겠습니다. 데모 코드를 보면 minDate는 현재 날짜를 기준으로 n일 전, maxDate는 n일 후를 의미하며 단위는 M, D로 표기합니다. 입력 요소를 클릭하면 기간이 제한된 달력이 나타납니다. 이번에는 jquery ui의 css 파일도 stylesheet로 첨부해줬습니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<script>
$(function(){
$("#startDate").datepicker({
minDate: +1,
maxDate: "+1M"
});
});
</script>
</head>
<body>
<p>
<label for="startDate">날짜 선택</label>
<input type="text" name="startDate" id="startDate">
</p>
</body>
</html>
jquery bxSilder
여러 개의 배너에 슬라이드 기능을 간편하게 적용할 수 있는 플러그인으로 모바일과 반응형 디자인에도 최적화되어 있습니다. bxSlider 플러그인 설치는 bxSlider 홈페이지에서 진행합니다.
저는 도서 내용과 다르게 파일을 다운받지 않고 링크로 걸어 예제를 진행하겠습니다. bxSlider 플러그인의 사용 기본형은 다음과 같습니다.
참조 변수 = $("dyth tjsxor").bxSlider({
옵션 설정,
});
// example
$(".bannerWrap").bxSlider({
auto: true,
autoControls: true
});
bxSlider 플러그인의 옵션 종류입니다. 옵션은 JSON 형식으로 작성하여 bxSlider 메서드에 전달하면 됩니다. 옵션을 설정하면 슬라이드 방향과 속도 등을 바꿀 수 있습니다.
| 종류 | 기본값 | 데이터 형식 | 설명 |
| mode | "horizontal" | "horizontal" "vertical" "fade" |
슬라이드 이동 방향 |
| speed | 500 | 숫자형 값 | 슬라이드 전환 속도 |
| pause | 4000 | 슬라이드 자동 실행 전환 사이 시간 | |
| pager | true | 논리형 값 | 현재 위치를 알리는 하단의 불릿 노출 여부 |
| moveSlides | 0 | 숫자형 값 | 이동할 슬라이드 개수 설정 |
| sliderWidth | 0 | 슬라이드 너비 설정 | |
| sliderMargin | 0 | 슬라이드 간 여백 설정 | |
| maxSlides | 1 | 슬라이드 최대 노출 개수 | |
| minSlides | 1 | 슬라이드 최소 노출 개수 | |
| auto | false | 논리형 값 | 슬라이드 자동 전환 여부 |
| autoHover | false | 슬라이드에 마우스 hover 시 자동 전환 멈춤 여부 | |
| controls | true | 이전/다음 버튼 노출 여부 |
슬라이드 콜백 함수
슬라이드 콜백 함수의 옵션 종류는 다음과 같습니다. 이 옵션은 슬라이드 요소가 완전히 로드된 다음 슬라이드 전환 전,후에 콜백 함수를 호출하는 방식으로 적용할 수 있습니다.
| 종류 | 기본값 | 설명 |
| onSliderLoad | onSliderLoad: function(a){ 자바스크립트 코드; } |
초기 슬라이드 요소가 로드된 다음 함수 실행 매개변수로 다음 값 할당 a : 현재 슬라이드 인덱스 |
| onSlideBefore | onSlideBefore: function(a, b, c){ 자바스크립트 코드; } |
현재 슬라이드가 전환하기 전 함수 실행 매개변수로 다음 값 할당 a : 다음 슬라이드 요소 b : 현재 슬라이드 요소 c : 다음 슬라이드 인덱스 |
| onSlideAfter | onSlideAfter: function(a, b, c){ 자바스크립트 코드; } |
현재 슬라이드가 전환한 후 함수 실행 매개변수로 다음 값 할당 a : 다음 슬라이드 요소 b : 현재 슬라이드 요소 c : 다음 슬라이드 인덱스 |
| onSlideNext | onSlideNext: function(a, b, c){ 자바스크립트 코드; } |
다음 슬라이드로 전환하기 전 함수 실행 매개변수로 다음 값 할당 a : 다음 슬라이드 요소 b : 현재 슬라이드 요소 c : 다음 슬라이드 인덱스 |
| onSlidePrev | onSlidePrev: function(a, b, c){ 자바스크립트 코드; } |
이전 슬라이드로 전환하기 전 함수 실행 매개변수로 다음 값 할당 a : 다음 슬라이드 요소 b : 현재 슬라이드 요소 c : 다음 슬라이드 인덱스 |
슬라이드 제어 메서드
슬라이드 제어 메서드는 배너에 이전, 다음, 정지, 재생 등의 제어 버튼을 만들 때 사용합니다.
| 종류 | 설명 |
| 참조 변수.goToslide(number); | 지정 슬라이드로 이동 |
| 참조 변수.goToNextSlide(); | 다음 슬라이드로 이동 |
| 참조 변수.goToPrevSlide(); | 이전 슬라이드로 이동 |
| 참조 변수.startAuto(); | 자동으로 슬라이드 전환 |
| 참조 변수.stopAuto(); | 자동으로 슬라이드 전환 정지 |
| 참조 변수.getCurrentSlide(); | 전환된 슬라이드의 인덱스값 반환 |
| 참조 변수.getSlideCount(); | 전체 슬라이드 개수 반환 |
| 참조 변수.reloadSlider(); | bxSlider() 메서드 초기화 후 다시 적용 |
| 참조 변수.destroySlider(); | 적용된 bxSlider() 메서드를 제거 |
bxSlider 로 자동 슬라이드 갤러리 만들기 예제
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<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>
<script>
$(function(){
$('.slide_gallery').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true
});
});
</script>
</head>
<body>
<div class="gallery_wrap">
<ul class="slide_gallery">
<li><img src="test1.jpg"></li>
<li><img src="test2.jpg"></li>
<li><img src="test1.jpg"></li>
<li><img src="test2.jpg"></li>
</ul>
</div>
</body>
</html>
jquery-cookie 플러그인
제이쿼리 쿠키 플러그인을 사용하면 간편하게 쿠키를 생성하고 만료일도 설정할 수 있습니다. 쿠키는 하나의 도메인당 최대 20개를 생성할 수 있고 최대 4KB까지 저장 가능한 사용자의 소량의 정보라고 보시면 됩니다. 쿠키를 이용해서 오늘동안 팝업 창 닫기, 최근 본 상품 등의 기능을 구현할 수 있습니다.
그러면 쿠키 플러그인을 설치해보겠습니다. (여기서) 파일을 받습니다. 창이 열리면 ctrl+s를 누르면 저장이 가능합니다.
jquery-cookie 메서드 사용법
jquery-cookie 메서드 사용법은 다음과 같습니다.
| 종류 | 예시 | 설명 |
| $.cookie("쿠키 이름", "쿠키 값", {expires: 만료일, path: "저장 경로"}); |
$.cookie("myName", "hello", {expires: 3, path: "/"}); |
쿠키 이름: "myName" 쿠키 값 : "hello" expires 값 : 3일 후 자동 소멸 path 값 : 최상위 폴더에 저장 |
| $.cookie("쿠키 이름"); | $.cookie("myName"); | "myName"이라는 이름으로 저장된 쿠키의 값 반환 |
| $.removeCookie("쿠키 이름"); | $.removeCookie("myName"); | "myName"이라는 이름으로 저장된 쿠키 제거 |
3일 간 이 창 열지 않기 예제를 제이쿼리 쿠키 플러그인으로 만들어보겠습니다. (크롬에서는 쿠키를 생성하려면 서버를 사용해야 합니다.) (현재 작동 안되는 코드)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.cookie.min.js"></script>
<script>
$(function(){
if($.cookie("popup") == "none"){
$("#notice_wrap").hide();
}
var $expChk = $("#expiresChk");
$(".closeBtn").on("click", closePop);
function closePop(){
if($expChk.is(":checked")){
$.cookie("popup","none",{expires:3, path:"/"});
}
$("#notice_wrap").fadeOut("fast");
}
});
</script>
</head>
<body>
<div class="notice_wrap">
<img src="test2.jpg">
<p class = "closeWrap">
<input type="checkbox" name="expiresChk" id="expiresChk">
<label for="expiresChk">3일 동안 이 창 열지 않기</label>
<button class="closeBtn">닫기</button>
</p>
</div>
</body>
</html>
플러그인 직접 제작하기
플러그인 제작을 위한 $.fn.extend() 메서드
개발자가 직접 제작한 함수를 jQuery에 확장시켜줍니다. 다음은 기본형이며 두가지 방법으로 사용가능합니다.
$.fn.extend({
확장 함수명: function(매개변수1, 매개변수2, ...){
$(this); //플러그인을 적용한 요소
자바스크립트 코드;
}
});
$("요소 선택").확장 함수명(인자값1, 인자값2); //플러그인 적용$.fn.확장 함수명 = function(매개변수1, 매개변수2, ...){
...
}
간단한 플러그인 제작하기
이벤트와 경고창을 나타내는 open 플러그인을 제작하여 버튼 태그에 적용한 예제
//eventType과 message를 매개변수로 전달하면
// 해당 eventType 발생 시 지정한 message를
// 경고창으로 나타낼 수 있습니다.
$(function(){
$.fn.open = function(eventType, message){
var ts = $(this);
$.each(ts, function(i, o){
$(o).on(eventType, function(){
alert(message);
});
});
}
// 플러그인 적용
$(".btn1").open("mouseover", "welcome!");
$(".btn2").open("click", "hello!");
});<p><button class="btn1">버튼1</button></p>
<p><button class="btn2">버튼2</button></p>
<p><button class="btn3">버튼3</button></p>
버튼1에 마우스를 올리면 welcome이라는 경고창을, 버튼2를 클릭하면 hello 경고창을 실행하는 코드입니다.
웹 개발에 유용한 플러그인 다섯 가지
유용한 제이쿼리 플러그인을 소개합니다.
| 순번 | 종류 | 사이트 | 설명 |
| 1 | TweenMax/Light | https://greensock.com/tweenmax | 복잡한 애니메이션 쉽게 구현. 풀패키지, 기본패키지 |
| 2 | lazyload | https://appelsiini.net/projects/lazyload/ | 페이지에 전체 이미지를 한번에 로딩하면서 로딩 속도가 느려지는 문제 해결. 스크롤바가 이미지 영역에 내려오면 이미지 로딩 |
| 3 | SVG Convert | https://github.com/bymayo/jquery-svg-convert | 이미지를 SVG 벡터 이미지로 변환 |
| 4 | spin.js | http://spin.js.org/ | 스핀 로딩 바 생성 |
| 5 | youtube-background | http://florian-chapon.fr/dev/youtube-background/ | 유튜브 백그라운드 |
본 내용은 do it 자바스크립트 제이쿼리 입문 도서의 내용을 공부하며 적어보았습니다.
'Javascript > JQuery' 카테고리의 다른 글
| 개체가 'getClientRects' 속성이나 메서드를 지원하지 않습니다. (2) | 2021.01.25 |
|---|---|
| jQuery Autocomplete (0) | 2021.01.15 |
| jQuery 비동기 방식 연동 (0) | 2020.04.23 |
| jQuery 다양한 효과와 애니메이션 (0) | 2020.04.22 |
| jQuery 객체 조작 메서드 (속성조작메서드, 수치조작메서드, 객체편집메서드) (4) | 2020.04.17 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
