dialog, datepicker 플러그인 Javascript & HTML & CSS/jQuery2016. 12. 4. 01:24
플러그인이란?
추가 기능을 제공하기 위한 라이브러리...라고 하면 되려나?
조만간 용어 정리를 좀 해야겠다.
ex) 플러그인, API, 라이브러리, 프레임워크 등... 알고는 있으며, 대강은 설명도 가능하나 꼬치꼬치 차이를 캐물으면 답변에 구멍이 생길 것 같다.
아무튼 아래 소스코드는 대화창과 달력 플러그인을 이용하는 예제 코드다.
당연히 저 코드만 복붙하면 동작하지 않는다. 왜냐면 jqueryui 사이트에서 라이브러리를 다운로드 받아서 만든 코드니까. script src와 link href 부분을 cdn으로 고치든지, 아니면 필요 파일을 다운받아야 제대로 동작할 것이다.
이 링크 타고가서 필요한 라이브러리 체크하고, 다운로드 받아오면 된다.
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="Stylesheet" href="jquery-ui.min.css"/>
<link rel="Stylesheet" href="jquery-ui.structure.css"/>
<link rel="Stylesheet" href="jquery-ui.theme.css"/>
<script>
$(function(){
$('#dialog').dialog();
$('#event_date').datepicker();
});
</script>
<style>
body{ font-size: 62.5%}
h1{text-align:center;}
input[type=text], label{
margin-bottom:12px;
padding:.4em;
width:95%;
}
</style>
</head>
<body>
<div id='dialog' title='jQuery UI dialog'>
<h1>Hello jQuery UI</h1>
<label for="event_date">날짜</label>
<input id="event_date" type="text"/>
</div>
</body>
</html>
그리고 결과는 다음과 같다. 소스코드 몇 줄 쓰지도 않았는데 좋은 디자인이 나옴.
닫기 버튼에 x가 없는 이유는 image를 추가하지 않았기 때문. 추가하면 해결될 것임..
'Javascript & HTML & CSS > jQuery' 카테고리의 다른 글
| jQuery pivot plugin (0) | 2017.01.05 |
|---|---|
| 이벤트 발생시 this (0) | 2016.12.07 |
| jquery 이벤트전달 막기 + 기본이벤트 제거 방법 (0) | 2016.12.06 |
| jquery 이벤트 막기 (0) | 2016.12.06 |
| jquery 최신 cdn (0) | 2016.08.11 |
