언어/javascript
jQuery 9 -- 유저 인터페이스(UI)
밍래그로프
2021. 2. 17. 15:52
A>날짜에 대한 UI
http://jqueryui.com/demos/datepicker
에서 얻을 수 있다.
B> jQuery UI는 플러그인 패턴을 기반으로 구축되어 있다.
http://jqueryui.com/download에 가서 jquery-ui-1.8.16.zip 파일을 다운 받는다.
압축을 푼 후 jquery-ui-1.8.16.custom\js\jquery-ui-1.8.16.custom.min.js 파일을 js 폴더에 복사한다.
스타일시트를 적용 받으려면 jquery-ui-1.8.15.custom\css 폴더도 복사해 둔다
C> 드래그 앤 드롭 기능 구현
|
1
2
3
4
5
6
7
8
|
$("#draggable").draggable({opacity:"0.3"});
$("#droppable").droppable({
accept : "#draggable", //드롭시킬 대상
drop : function() {
$(this).text('끌어다 놓았음');
}
});
|
cs |
|
1
2
3
4
|
<body style="font-size: 62.5%;">
<img id="draggable" src="../images/strawberry.gif">
<div id="droppable">요소를 끌어다 놓으세요</div>
</body>
|
cs |