플러그
인(plug-in)이란 다양한 기능을 구현해 놓은 제이쿼리 라이브러리이다.
제이쿼리 플러그인을 내려받아 연동하면 제이쿼리로 구현하기 어려운 다양한 기능을 쉽고 간단하게 사용할 수 있어서 사이트 제작시 제이쿼리 사용자가 많이 이용한다.
무료 저작권 종류
| 구분 | 종류 |
| 자유 수정 가능 | TIT, BSD, Apache, Public Domain, Free |
| 수정시 부분 공개 | LGPL,MPL |
제이쿼리 플러그인 다운로드사이트
HtmlDrive - Free Dhtml scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library
www.htmldrive.net
8500+ Best jQuery Plugins & Tutorials with jQuery Demo examples 2019 - 2018
Skeletabs is an open source jQuery plugin that provides tabbed browsing feature to your web contents. It is focused on accessibility and scalability above all else, and is designed to support convenience of screen readers and keyboard users, as well
www.bestjquery.com
플러그인 연동하기
<head>
<script>
1. 제이쿼리 라이브러리 연동
2. 플러그인 연동
</script>
</head>
1. UI 플러그인으로 드래그 레이어 창 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<style>
.layer_popup{
position: absolute;left: 50px; top: 50px;
cursor:move;
}
</style>
<script>
$(function(){
$(".layer_popup").draggable();
});
</script>
</head>
<body>
<div class="layer_popup">
<img src="images/window_object_1.jpg" alt="">
</div>
</body>
</html>
2. UI 플러그인으로 날짜 설정 달력 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="css/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>
3. bxSlider 플러그인으로 날짜 설정 달력 만들기
여러개의 배너에 슬라이드 기능을 간편하게 적용할 수 있는 플러그인이다.
모바일에도 최적화되어 있어서 슬라이드 기능도 동일하게 동작하며 반응형 디자인에도 최적화되어있다.
jQuery Content Slider | Responsive jQuery Slider | bxSlider
The only way to keep bxSlider free is to show one tasteful ad per page. After disabling your adblocker please refresh the page and this message will not appear again. Thank you for your support 🤗
bxslider.com
홈페이지에서 플러그인 파일을 내려받고 작성한다
기본형
참조 변수 = $("요소 선택").bxSlider({
옵션 설정,
});| <ul class="bannerWrap"> <li>배너 콘텐츠 1</li> <li>배너 콘텐츠 2</li> <li>배너 콘텐츠 3</li> </ul> |
var bnn = $(".bannerWrap").bxSlider({ auto:true, autoControls: true }); |
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 | 논리형 값 | 슬라이드에 마우스를 올렸을 때 자동 전환을 멈추게 할 것인지의 여부 설정 |
| controls | true | 논리형 값 | 이전/다음 버튼의 노출 여부 설정 |
bxSlider 콜백 함수의 옵션 종류
| 종류 | 기본값 | 설명 |
| onSliderLoad | onSliderLoad : function(a){ 자바스크립트 코드; } |
초기 슬라이드 요소가 로드된 다음 함수 실행, 매개변수로 다음 값 할당 a: 현재 슬라이드 인덱스 |
| onSlideBefore | onSlideBefore : function(b,c,d){ 자바스크립트 코드; } |
현재 슬라이드가 전환하기 전에 함수 실행, 매개변수로 다음 값 할당 b: 다음 슬라이드 요소 c: 현재 슬라이드 인덱스 d: 다음 슬라이드 인덱스 |
| onSlideAfter | onSlideAfter : function(b,c,d){ 자바스크립트 코드; } |
현재 슬라이드가 전환한 후에 함수 실행, 매개변수로 다음 값 할당 b: 다음 슬라이드 요소 c: 현재 슬라이드 인덱스 d: 다음 슬라이드 인덱스 |
| onSlideNext | onSlideNext : function(b,c,d){ 자바스크립트 코드; } |
다음 슬라이드로 전환하기 전에 함수 실행, 매개변수로 다음 값 할당 b: 다음 슬라이드 요소 c: 현재 슬라이드 인덱스 d: 다음 슬라이드 인덱스 |
| onSlidePrev | onSlidePrev : function(b,c,d){ 자밥스크립트 코드; } |
이전 슬라이드로 전환하기 전에 함수 실행, 매개변수로 다음 값 할당 b: 이전 슬라이드 요소 c: 현재 슬라이드 인덱스 d: 이전 슬라이드 인덱스 |
슬라이드 제어 메소드
배너에 제어 버튼을 만들 때 사용한다. 이전 버튼 또는 다음 버튼을 만들 때나 정지 버튼, 재생 버튼을 만들 때 사용한다.
슬라이드 제어 메소드 종류
| 종류 | 설명 |
| 참조 변수.goToSlide(number); | 지정한 슬라이드 이동 |
| 참조 변수.goToNextSlide(); | 다음 슬라이드 이동 |
| 참조 변수.goToPrevSlide(); | 이전 슬라이드 이동 |
| 참조 변수.startAuto(); | 자동으로 슬라이드 전환 |
| 참조 변수.stopAuto(); | 자동으로 슬라이드 전환되는 것을 정지시킴 |
| 참조 변수.getCurrentSlide(); | 전환된 슬라이드의 인덱스값 반환 |
| 참조 변수.getSlideCount(); | 전체 슬라이드의 개수 반환 |
| 참조 변수.reloadCount(); | bxSlider() 메소드를 초기화한 다음 다시 적용 |
| 참조 변수.destroySlider(); | 적용한 bxSlider() 메소드 제거 |
자동 슬라이드 갤러리 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="css/jquery.bxslider.min.css">
<script>
$(function(){
$('.slide_gallery').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true
});
});
</script>
</head>
<body>
<div id="gallery_wrap">
<ul class="slide_gallery">
<li><img src="images/pic_1.jpg" alt="사진1"></li>
<li><img src="images/pic_2.jpg" alt="사진2"></li>
<li><img src="images/pic_3.jpg" alt="사진3"></li>
<li><img src="images/pic_4.jpg" alt="사진4"></li>
<li><img src="images/pic_5.jpg" alt="사진5"></li>
<li><img src="images/pic_6.jpg" alt="사진6"></li>
<li><img src="images/pic_7.jpg" alt="사진7"></li>
<li><img src="images/pic_8.jpg" alt="사진8"></li>
</ul>
</div>
</body>
</html>
4. jquery-cookie 플러그인 활용하기
jquery-cookie 플러그인
jquery-cookie 플러그인을 사용하면 간편하게 쿠키를 생성하고 쿠키 만료일을 설정할 수 있다.
쿠키 : 사이트를 방문한 사용자의 소량의 브라우저 정보를 저장할 수 있는 공간
하나의 도메인 당 최대 20개를 생성할 수 있고 최대 4KB까지 저장할 수 있다. 쿠키를 사용하면 '오늘 하루 동안 이 창 열지 않기'나 '최근에 본 상품' 기능 구현할 수 있다.
jquery-cookie 플러그인 설치
cdnjs - The #1 free and open source CDN built to make life easier for developers
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 each month, powered by Cloudflare. We make it faster and easier to load library fil
cdnjs.com
jquery-cookie 검색
jquery-cookie 메소드 사용법
| 종류 | 예시 | 설명 |
| $.cookie("쿠키 이름","쿠키 값", {expires:만료일, path:"저장 경로"}); | $.cookie("myName", "hello", {expire:3,path:"/"}); | 쿠키 이름: "myName" 쿠키 값: "hello" expires 값: 3(3일 후 자동 소멸) path 값: "/"(최상위 폴더에 저장) |
| $.cookie("쿠키 이름"); | $.cookie("myName") | "myName"이라는 이름으로 저장된 쿠키의 값 반환 |
| $.removeCookie("쿠키 이름"); | $.removeCookie("myName") | "myName"이라는 이름으로 저장된 쿠키를 제거 |
'3일동안 이 창 열지 않기' 팝업 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
}
input {
vertical-align: middle;
}
#notice_wrap {
width: 300px;
position: absolute;
left: 30px;
top: 30px;
box-shadow: 0 0 8px #000;
}
.closeWrap {
background-color: #000;
color: #fff;
text-align: right;
padding: 5px 10px;
}
.closeWrap button {
margin-left: 20px;
cursor: pointer;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.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", { expire: 3, path: "/" });
}
$("#notice_wrap").fadeOut("fast");
}
});
</script>
</head>
<body>
<div id="notice_wrap">
<img src="images/window_object_1.jpg" alt="공지사항">
<p class="closeWrap">
<input type="checkbox" name="expiresChk" id="expiresChk">
<label for="expiresChk">3일 동안 이 창 열지않기</label>
<button class="closeBtn">닫기</button>
</p>
</div>
</body>
</html>
5. 플러그인 직접 제작하기
플러그인 제작을 위한 $.fn.extend() 메서드
개발자가 직접 제작한 함수를 jQuery에 확장시켜주는 역할을 한다.
$.fn.extend() 기본형
$.fn.extend({
확장 함수명: function(매개변수1, 매개변수2,...){
$(this);
자바스크립트 코드;
}
});
$("요소 선택").확장 함수명(인자값1, 인자값2);$.fn.확장 함수명 = function(매개변수1, 매개변수2, ...) {
...
}
간단한 플러그인 제작하기
이벤트와 경고 창을 나타내는 open플러그인을 제작하여 버튼 대그에 적용한 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<script src="js/jquery.js"></script>
<script>
$(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!");
});
</script>
</head>
<body>
<p><button class="btn1">버튼1</button></p>
<p><button class="btn2">버튼2</button></p>
<p><button class="btn3">버튼3</button></p>
</body>
</html>
버튼1에 마우스 포인터를 올리면 'welcol!'이라고 경고창을 나타낸다.
버튼2를 클릭하면 'hello!'라고 경고창을 나타낸다
자주묻는 질문 플러그인 제작하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
font: 14px Malgun Gothic, "맑은고딕", sans-serif;
color: #555;
}
h1 {
font-size: 1em;
margin-bottom: 10px;
}
</style>
<link rel="stylesheet" href="css/faq.css">
<script src="js/jquery.js"></script>
<script>
$(function () {
$.fn.extend({
faq: function () {
var ts = $(this);
$.each(ts, function (i, o) {
$("button", o).on("click", tabmenu);
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>
</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>
웹개발에 유용한 플러그인
| 종류 | 사이트 | 설명 |
| TweenMax TweenLight |
https://greensock.com/tweenmax https://greensock.com/tweenlite |
복잡한 애니메이션을 쉽게 구현해주는 플러그인 |
| lazyload | http://appelsiini.net/projects/lazy-load/ | 페이지에 전체 이미지를 한번에 로딩하면 로딩 속도가 느려지는데, layload 플러그인은 스크롤바가 이미지 영역에 내려오면 이미지를 부름 |
| SVG Convert | https://github.com/madeby-shape/svg-convert | 이미지를 svg벡터 이미지로 변환하는 플러그인 |
| spin.js | http://spin.js.org/ | 스핀 로딩 바를 생성하는 플러그인 |
| youtube-background | http://florian-chapon.fr/dev/youtube-background/ | 유튜브 백그라운드 플러그인 |
참고 : ⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.
'🎨 Web_Front end > JQuery' 카테고리의 다른 글
| 반응형 이미지 맵 제이쿼리 (jQuery-rwdImageMaps) (0) | 2023.12.13 |
|---|---|
| 제이쿼리 그룹 이벤트 등록 및 삭제하기 (0) | 2023.04.28 |
| 제이쿼리 이벤트 객체와 종류 (마우스 이벤트, 키보드 이벤트, 전체 이벤트) (0) | 2023.04.28 |
| 제이쿼리 이벤트 (0) | 2023.04.28 |
| 객체 조작 (객체 조작 메서드, 속성 조작 메서드, 수치 조작 메서드, 객체 편집 메서드) (0) | 2023.04.27 |
