PLUG IN
01 JQUERY UI
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue
jqueryui.com
_draggable
뷰소스에서 들어가야할 부분 복사해서 붙여넣기 파일형식에 맞게 수정한다.
아이디를 클래스형식으로 바꾸고 이름 변경
드래그가 잘 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </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/pic_1.jpg" alt="">
</div>
</body>
</html>_datepicker
제이쿼리 유아이 접속
소스코드 복사하기 붙여넣기
for 이름 통일하기
상황에 따라 속성값 변경 가능하다.
02 bxSlider
jQuery Content Slider | Responsive jQuery Slider | bxSlider
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Initialize the bxSlider plugin This code tells the webpage to start the slider setup. Without this code the slider plugin would not be visible on the page.
bxslider.com
_Image gallery with captions
2번 선택 > 박스 슬라이더 기능
박스슬라이더 링크를 먼저 걸어준다
JS 에 있는 부분을 복사해서 script 부분에 붙여넣기한다
바로 적용되었다!
_Thumbnail pager - method 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="css/jquery.bxslider.min.css">
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
#gallery_wrap{ margin: 0 auto; width: 450px;}
#gallery_wrap .bx-wrapper{margin-bottom: 20px;}
.slider-pager{text-align: center;}
.slider-pager li{display: inline;}
</style>
<script>
$(function() {
// bxSlider를 이용한 섬네일 페이지 슬라이드 갤러리 구현
// 슬라이드 갤러리 문단 태그를 작성한 다음
// bxSlider() 플러그인을 적용합니다.
// 섬네일 목록(ul)의 class값("slider-pager")과
// <a> 태그의 'data-slide-index' 속성값을 참조합니다.
$('.slide_gallery').bxSlider({
//웹페이지 하단 섬멘일 pager의 class값을 지정해줍니다.
pagerCustom: '.slide_gallery'
});
});
</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="사진8"></li>
</ul>
<ul class="slider-pager">
<li><a href="#" data-slide-index="0">
<img src="images/pic_t1.jpg" alt="사진1"></a>
</li>
<li><a href="#" data-slide-index="1">
<img src="images/pic_t2.jpg" alt="사진2"></a>
</li>
<li><a href="#" data-slide-index="2">
<img src="images/pic_t3.jpg" alt="사진3"></a>
</li>
<li><a href="#" data-slide-index="3">
<img src="images/pic_t4.jpg" alt="사진4"></a>
</li>
<li><a href="#" data-slide-index="4">
<img src="images/pic_t5.jpg" alt="사진5"></a>
</li>
</ul>
</div>
</body>
</html>03 cdnjs
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)를 생성하고 쿠키 만료일을 설정할 수 있습니다.
쿠키란 '사이트를 방문한 사용자의 소량(4kb이하) 브라우저 정보를 저장할 수 있는 공간'을 말합니다.
쿠키는 하나의 도메인당 최대 20개를 생성할 수 있고, 최대 4kb까지 저장할 수 있습니다.
3일동안 이창열지않기를 체크하고 닫기를 누르면
스토리지에 쿠키에 popup 에 none으로 뜨기 때문에 3일 동안 열리지 않게 된다.
다시 활성화 하려면 인터넷사용기록삭제를 클릭한다.
쿠키에 popup 삭제하면된다.
04 cdnjs
spin.js
spin.js Example Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major brow
spin.js.org
나만의 플러그인 만들어보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<script src="js/jquery.js"></script>
<script src="js/plugins/jquery.open.madebycsj.js"></script>
<script>
// 플러그인 제작을 위한 $.fn.extend() 메서드 활용
// $.fn.extend() 메서드는 개발자가 직접 제작한 함수를
// jQuery에 확장시켜 주는 역할을 합니다.
// 다음은 이벤트와 경고 창을 나타내는 open 플러그인을
// 제작하는 예시입니다.
$(function() {
//open 플러그인 적용
// 버튼1(class="btn1")에 마우스 포인터를 올리면(mouseover),
// 메시지(message 매개변수값)가 경고창(Alert) 형식으로 나타나게 합니다.
$(".btn1").open("mouseover", "장나라님~ 환영합니다!");
// 버튼2(class="btn2")을 클릭하면(click),
// 메시지(message 매개변수값)가 나타나게 합니다.
$(".btn2").open("click", "반갑습니다~^-^/");
$(".btn3").open("mouseover", "내가 만든 제이쿼리플러그인");
});
</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>'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| LANDING PAGE 구현 (0) | 2023.08.04 |
|---|---|
| [JAVASCRIPT] AJAX _2 (0) | 2023.08.03 |
| [JAVASCRIPT]DOM (0) | 2023.08.02 |
| JAVA 설치 / 아파치 톰캣 (0) | 2023.08.01 |
| [백엔드]OS 단축키 및 네트워크 IP (0) | 2023.08.01 |