jQuery UI - 메서드
- draggable( ) : 마우스 드래그가 가능한 요소
#draggable{
width: 150px;
height: 150px;
padding: 0.5em;
}
$(function() {
$('#draggable').draggable();
});
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
- droppable( ) : 마우스 드롭이 가능한 요소
$(function() {
// 태그를 움직이게 처리
$('#draggable').draggable();
// 움직이는 태그가 특정 태그에 놓여질 때 이벤트 처리
$('#droppable').droppable( {
drop:function(event,ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
},
out:function(event,ui) {
$(this).removeClass('ui-state-highlight').find('p').html('Drop here');
}
});
});
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
- accordion( ) : 헤더를 클릭하면 내용을 보여주는 요소
$(function() {
$('#accordion').accordion();
});
<body>
<div id="accordion">
<h3>Header - 1</h3>
<div>
<p>Paragraph - 1</p>
</div>
<h3>Header - 2</h3>
<div>
<p>Paragraph - 2</p>
</div>
<h3>Header - 3</h3>
<div>
<p>Paragraph - 3</p>
</div>
<h3>Header - 4</h3>
<div>
<p>Paragraph - 4</p>
</div>
</div>
</body>
- datepicker( ) : 날짜 선택 요소
⭐ HTML5가 지원하는 날짜보다 다양한 옵션을 제공함
$(function() {
$('#datepicker').datepicker({
showMonthAfterYear:true, // default 월 년
dateFormat:'yy-mm-dd',
dayNamesMin:['일','월','화','수','목','금','토'], // default 영문
changeYear:true,
monthNamesShort:['1','2','3','4','5','6','7','8','9','10','11','12'], // default 영문
changeMonth:true
});
});
<body>
<p>
Date : <input type="text" id="datepicker">
</p>
</body>
- dialog( ) : x 아이콘이 달린 대화상자
$(function(){
$('#dialog').dialog();
});
<body>
<div id="dialog" title="Basic dialog">
<p>
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
</p>
</div>
</body>
$(function() {
$('#dialog').dialog({
autoOpen:false,
show:{
effect:'blind',
duration:1000
},
hide:{
effect:'explode',
duration:1000
}
});
// button 이벤트 연결
$('#opener').click(function() {
// dialog 창 열기
$('#dialog').dialog('open');
});
});
<body>
<div id="dialog" title="Basic dialog">
<p>
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
</p>
</div>
<button id="opener">Open Dialog</button>
</body>
$(function() {
$('#dialog-confirm').dialog({
resizable:false, // false로 지정하면 창의 크기를 변경할 수 없음
modal:true, // dialog가 표시되면 부모영역을 선택할 수 없게 처리
buttons:{
'Delete all items':function() { // 키에 공백이 있으면 작은 따옴표로 묶기
$(this).dialog('close');
},
Cancel:function() {
$(this).dialog('close');
}
}
});
});
<body>
<div id="dialog-confirm" title="Basic dialog">
<p>
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
</p>
</div>
<p>모달창은 dialog가 표시되면 부모 영역을 선택할 수 없는 창을 의미한다.</p>
</body>