Day41
2020. 11. 27. 10:30ㆍ교육과정/KOSMO
키워드 : 플러그인 개념 /
****
1. 플러그인 개념
※ (1) JQuery를 불러오는 스크립트를 첫 번째로 작성한다.
(2) PlugIn을 불러오는 스크립트를 두 번째로 작성한다.
(3) html 내에서 작성할 JS 스크립트(jquery 등)를 세 번째로 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1. jquery -->
<script src='../../lib/jquery-3.5.1.min.js' type="text/javascript"></script>
<!-- 2. plugin -->
<script src='/WebUI/5_jquery_class/9_plugin/0_basic/js/jquery.red.js' type="text/javascript"></script>
<!-- 3. user defined script -->
<script type="text/javascript">
});
</script>
</head>
<body>
</body>
</html>
※ (2) 로 불러올 플러그인의 생김새
-- red라는 함수에 대해 정의함
-- 첫 번째로 오는 this는 html 파일에서 jquery를 수행중인 객체를 가리킴
-- 두 번째로 오는 this는 플러그인 js 파일에서 작업 수행이 끝난 객체를 다시 원래의 html 파일로 돌려주기 위함
(필수는 아니지만, 리턴받을 필요가 있을 경우에는 작성해줘야 함)
/*
jquery.red.js
나의 제이쿼리 라이브러리로 전 세계 배포합니다.
written by jung
*/
$.fn.red=function(){
$(this).css('background','red');
return this;
}
※ html 파일에서 플러그인을 사용할 user defined script와 body를 작성한다.
<!-- 3. user defined script -->
<script type="text/javascript">
$(function(){
$('#red').click(function(){
$('#result').red();
});
});
</script><body>
<button id='red'>빨강</button>
<div id='result'>나는 빨강을 좋아한다.</div>
</body>※ 실행 결과
<jquery_test.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1. jquery -->
<script src='../../lib/jquery-3.5.1.min.js' type="text/javascript"></script>
<!-- 2. plugin -->
<script src='/WebUI/5_jquery_class/9_plugin/0_basic/js/jquery.red.js' type="text/javascript"></script>
<!-- 3. user defined script -->
<script type="text/javascript">
$(function(){
$('#red').click(function(){
$('#result').red();
});
});
</script>
</head>
<body>
<button id='red'>빨강</button>
<div id='result'>나는 빨강을 좋아한다.</div>
</body>
</html>
<jquery.red.js 전체 소스 코드>
더보기
/*
jquery.red.js
나의 제이쿼리 라이브러리로 전 세계 배포합니다.
written by jung
*/
$.fn.red=function(){
$(this).css('background','red');
return this;
}
<jquery-1.11.1.js 파일>
2. 플러그인을 사용하여 탭팬 만들기
※ 플러그인에 함수마다 사용된 html 구조를 동일하게 만들어줘야 적용된다.
(기존)
(플러그인 적용)
$(function(){
/* 플러그인에서 정의된 tabs()를 가져와 사용*/
$('#info').tabs();
})
(플러그인에 추가적인 옵션 적용)
$(function(){
/* 플러그인에 추가적인 옵션을 적용하고자 할 경우 */
$('#info').tabs({
active:1, // active : 처음에 열릴 패널의 인덱스 번호
event:'mouseover', // event : 탭을 활성화하는 이벤트
heightStyle:'auto', /* heightStyle : 패널의 높이를 정함
- content(default, 내용에 따라 높이가 달라짐)
- fill(부모 요소의 크기로 맞춤)
- auto (가장 요소의 크기로 고정시킴) */
hide:true // hide : 애니메이션 효과
});
})
<juery_test.html 전체 소스 코드>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>스타트래커!</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- 1. jquery -->
<script src='../../lib/jquery-3.5.1.min.js' type="text/javascript"></script>
<!-- 2. plugin -->
<script src='./js/jquery-ui-1.10.0.custom.min.js' type="text/javascript"></script>
<!-- 3. user defined script -->
<script src='./js/scripts.js' type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>스타파헤치기</h1>
</div>
<div id="content">
<h2>
환영합니다!
</h2>
<div id="info">
<ul id="info-nav">
<li><a href="#intro">소개</a></li>
<li><a href="#about">회사에 대해</a></li>
<li><a href="#disclaimer">경고</a></li>
</ul>
<div id="intro">
<p>
최고의 유명인을 추적하고 살펴볼 수 있는 <strong>스타트래커!</strong>에 오신 것을 환영합니다. 세계 제 1의 밴드나 음악가 또는 프로듀서가 옆 동네 어느 곳에 있는지 궁금하신가요? 바로 여기서 그 궁금증을 해결할 수 있습니다. 여기서 이번 주에는 아주 특별한 유명인의 정보를 제공할 것입니다. 서두르세요!
</p>
</div>
<div id="about">
<p>
스타트래커!는 로스엔젤레스 출신의 어느 젋은 사업가가 GPS기능이 있는 RFID 태그를 사람들이 모르게 사람에게 붙일 수 있는 방법을 발견한 2009년 초에 설립됐습니다. 사업가는 로스엔젤레스 출신이었으므로 사업가의 첫 번째 생각은 이 기술을 이용하여 팬이 그들의 유명인의 위치를 추적하고 알 수 있게 만들었습니다. 그리고 이런 유행은 널리 퍼지게 됐습니다.
</p>
</div>
<div id="disclaimer">
<p>
경고! 이 사이트는 범죄를 위한 사이트가 아닙니다. 유명인사들의 사생활도 보호받아야 합니다.
</p>
</div>
</div>
</div>
<div id="footer">
<p>
© Copyright 2010 유명인추적 프로덕션
</p>
</div>
</div>
</body>
</html>
<jquery-ui-1.10.0.custom.min.js 파일>
jquery-ui-1.10.0.custom.min.js
0.22MB
<폴더 전체 압축파일>
3. 플러그인을 사용하여 아코디언 만들기
(기존)
(플러그인 적용)
$(function(){
$('.accordion').accordion();
})
(플러그인에 추가적인 옵션 적용)
$(function(){
$('.accordion').accordion({
// event : 'mouseover' // 마우스가 올라가면 내용이 나타남
// animate: 1000 // n초간 애니메이션 발생
heightStyle: 'content',
// 2개 이상의 속성을 넣고자 할 때는 json 구조로 작성한다.
animate: { dutation:1000, easing:'easeInElastic' }
});
})
<jquery-ui-1.10.0.custom.min.js 파일>
jquery-ui-1.10.0.custom.min.js
0.22MB
<폴더 전체 압축파일>
4. datepicker 플러그인을 사용하여 날짜 입력하기
<script type="text/javascript">
$(function(){
// 달력의 언어 설정
$.datepicker.setDefaults($.datepicker.regional['ko']);
$('#datepicker').datepicker({
// 달력화면이 열릴 때의 애니메이션 옵션
showAnim : 'slideDown',
// 버튼을 눌렀을 때 달력화면이 나오도록
showOn : 'button',
// 버튼에 들어갈 이미지
buttonImage : 'images/calendar.gif',
// 이미지만 나오고 버튼 형태는 사라지도록
buttonImageOnly : true
});
});
</script>
<폴더 전체 압축파일>
5. 플러그인을 사용하여 팝업 만들기
※ 외부 라이브러리와 스타일을 임포트할 때 순서를 잘 숙지해야 한다.
<head>
<meta charset="UTF-8" />
<!-- prettyPopin의 표준 스타일을 임포트（1） -->
<link rel=stylesheet href="css/prettyPopin.css" type="text/css" />
<!-- jQuery라이브러리를 임포트（2） -->
<script type="text/javascript" src="../../lib/jquery-1.9.1.js"></script>
<!-- prettyPopin라이브러리를 임포트（3） -->
<script type="text/javascript" src="js/jquery.prettyPopin.js"></script>
<!-- 사용자 정의 스크립트 파일 (4) -->
<script type="text/javascript" src="js/scripts.js"></script>
</head>
※ 선택자 주의!
<a>태그에 대해 함수를 연결시키고자 할 때는 선택자를 rel 쪽으로 걸어준다.
$(function(){
$('a[rel="prettyPopin"]:first').prettyPopin({
width : 500
});
$('a[rel="prettyPopin"]:last').prettyPopin({
width : 500,
callback : function(){
alert('팝업창이 닫힘'); // 내부에 함수를 작성할 수도 있음
}
});
})
<폴더 전체 압축파일>
6. 플러그인을 사용하여 폼 만들기
>>>> 플러그인을 사용하여 TextArea에서의 유효성 검사를 수행하는 스크립트
// 플러그인의 validate()를 사용하여 유효성검사
$('#signup form').validate({
// 규칙
rules : {
// form 내의 id가 name인 요소에 대해
name : {
required : true, // 필수 입력 사항
minlength : 4 // 글자 수 제한
},
email : {
email : true // email 형태로 입력하도록 제한
},
website : {
url : true // url 형태로 입력하도록 제한
},
password : {
required : true // 필수 입력 사항
},
passconf : {
equalTo : '#password' // 비밀번호와 동일하게 입력하도록
}
},
// 성공하면 수행
success : function(label){
label.addClass('valid');
label.text('성공'); // '성공' 문구가 출력되진 않지만, 없으면 우측에 녹색 체크가 안 됨
}
});
>>>> 플러그인을 사용하여 체크박스의 선택사항을 나머지 체크박스에 적용시키는 스크립트
// "위 조항 모두" 체크박스 선택시 모든 체크박스 체크 , 해제시 모든 체크박스 해제
// attr() 버그 발견시 prop() 사용
$('.check-all').click(function(){
if( $(this).is(':checked') ){
$('.agree').prop('checked', true);
}else{
$('.agree').prop('checked', false);
}
});
< 전체 압축 파일 >
7. BX Slider
$(document).ready(function(){
$('#slide_banner').bxSlider({
minSlides : 4, // 한 번에 보일 최소 이미지 수
maxSlides : 4, // 한 번에 보일 최대 이미지 수
slideMargin : 10, // 이미지와 이미지 사이의 여백
slideWidth : 200, // 슬라이드 전체 폭
auto: true, // 자동 재생
autoControls: true, // 재생 버튼
stopAutoOnClick: false,
pager: true, // 페이지 단추 보일지 안 보일지
moveSlides : 1, // 슬라이드가 몇 장씩 움직일지
speed :300, // 슬라이드 속도 (1000 = 1초)
pause : 1000
});
});
< bxSlider.html 전체 소스 코드 >
더보기
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title> Plugin </title>
<style type="text/css">
*{margin:0;padding:0;}
img{border:none 0;vertical-align:top;}
#banner_wrap{position:relative;width:470px;margin:0 auto;}
#prevBtn{position:absolute;left:0;top:10px;}
#nextBtn{position:absolute;right:15px;top:10px;}
</style>
<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>
$(document).ready(function(){
$('#slide_banner').bxSlider({
minSlides : 4, // 한 번에 보일 최소 이미지 수
maxSlides : 4, // 한 번에 보일 최대 이미지 수
slideMargin : 10, // 이미지와 이미지 사이의 여백
slideWidth : 200, // 슬라이드 전체 폭
auto: true, // 자동 재생
autoControls: true, // 재생 버튼
stopAutoOnClick: false,
pager: true, // 페이지 단추 보일지 안 보일지
moveSlides : 1, // 슬라이드가 몇 장씩 움직일지
speed :300, // 슬라이드 속도 (1000 = 1초)
pause : 1000
});
});
</script>
</head>
<body>
<div id="banner_wrap">
<ul id="slide_banner">
<li><a href="#"><img src="images/pic_t1.jpg" alt="사진1" /></a></li>
<li><a href="#"><img src="images/pic_t2.jpg" alt="사진2" /></a></li>
<li><a href="#"><img src="images/pic_t3.jpg" alt="사진3" /></a></li>
<li><a href="#"><img src="images/pic_t4.jpg" alt="사진4" /></a></li>
<li><a href="#"><img src="images/pic_t5.jpg" alt="사진5" /></a></li>
<li><a href="#"><img src="images/pic_t6.jpg" alt="사진6" /></a></li>
<li><a href="#"><img src="images/pic_t7.jpg" alt="사진7" /></a></li>
<li><a href="#"><img src="images/pic_t8.jpg" alt="사진8" /></a></li>
</ul>
</div>
</body>
</html>
반응형