코밍이의 하루
[JQuery] 제이쿼리 UI 플러그인 활용 본문
1. 개발 환경
구분 | 내용 |
사용 언어 | HTML5, CSS3, JS, jQuery |
개발환경 | Visual Studio Code |
참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
웹브라우저 | Chrome |
2. 주요 문법
1) 제이쿼리 UI 플러그인
- 사용자 환경을 개발하는 데 매우 유용한 메소드를 제공하는 플러그인
- 선택한 요소를 마우스로 이동시킬 수 있는 드래그 기능, 요소가 펼쳐졌다가 줄어드는 아코디언 기능, 지정한 요소에 마우스를 올렸을 때 툴 팁(설명 정보 창)을 나타내는 기능 등 사용자 환경에 다양하고 편리한 기능을 쉽고 빠르게 적용시킬 수 있음
- 제이쿼리 UI 사이트 : http://jqueryui.com
3. 소스 코드 및 실행 결과
1) jquery_plugin_1_test.html
- UI 플러그인으로 드래그 레이어 창 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<script src="js/jquery.js"></script> <!-- 제이쿼리 라이브러리 JS 파일-->
<script src="js/jquery-ui-1.10.4.custom.min.js"></script> <!-- UI 플러그인 JS 파일-->
<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>
2) jquery_plugin_2_test.html
- UI 플러그인으로 날짜 설정 달력 만들기
<!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>
<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>
'웹언어 공부 > JQuery' 카테고리의 다른 글
[JQuery] JQuery-cookie 플러그인 활용하기 (0) | 2021.08.24 |
---|---|
[JQuery] bxSlider 플러그인 활용하기 (0) | 2021.08.24 |
[JQuery] 제이쿼리 플러그인 정의 (0) | 2021.08.24 |
[JQuery] JSONP로 교차 도메인 데이터(XML) 불러오기 (0) | 2021.08.24 |
[JQuery] 서버 언어(PHP)로 교차 도메인 데이터(XML) 불러오기 (0) | 2021.08.24 |