코밍이의 하루
[JQuery] 제이쿼리 UI 플러그인 활용 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3, JS, jQuery |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) 제이쿼리 UI 플러그인
- 사용자 환경을 개발하는 데 매우 유용한 메소드를 제공하는 플러그인
- 선택한 요소를 마우스로 이동시킬 수 있는 드래그 기능, 요소가 펼쳐졌다가 줄어드는 아코디언 기능, 지정한 요소에 마우스를 올렸을 때 툴 팁(설명 정보 창)을 나타내는 기능 등 사용자 환경에 다양하고 편리한 기능을 쉽고 빠르게 적용시킬 수 있음
- 제이쿼리 UI 사이트 : http://jqueryui.com
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
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 |
'웹언어 공부/JQuery' Related Articles
more
