jQuery UI 의 장점
• 애니메이션 플러그인
• 움직이는 애니메이션들
• 상호작용 플러그인
• 드래그앤 드랍, 정렬
• 위젯 플러그인
• 쉽게 쓰는 반응형 인터페이스
• 다양한 효과 구경하기
• http://jqueryui.com/
멋진 UI를 쉽게 구현하는 가장 효과적인 방법01
jQuery UI 다운로드
•
http://jqueryui.com/download
• 느려서 받아지지 않음.
다양한 테마 까지…
CDN을 이용해 보자.
• Contents Delivery Network
• 소스코드를 웹에 올려놓고, import 해서 쓰기.
•
https://code.jquery.com/
더 이상 다운로드 받느라 시간낭비 하지 말자.
03
jQuery UI Tutorial
04
실습 12
•
http://jqueryui.com/
참조할 것.
• 만난날 : datepicker
• 만난 경위 : autocomplete
• "meeting", "accidentally
meet","promise","date","etc“
• 나와의 관계 :buttonset
• 대화 시간 : slider
• 만난 위치 : selectmemu
• 저장완료 알림 : dialog
05
Html 코드 앞부분 공개
06
<!DOCTYPE html> <html> <head> <title>나의 만남 일지</title><link type = "text/css" href="https://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="jeqery_ui_scripts.js"></script>
</head> <body>
<div class="ui-widget-header ui-corner-top form_pad"> <h2>내가 만난 사람들</h2>
</div>
<form id="frmAddSighting" name="form" method="post"> <div class="ui-widget-content form_pad">
<h3>만난 사람 데이터</h3> </div>
<div class="ui-widget-content form_pad"> <h3>만난날</h3>
