1. draggable
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<style type="text/css">
#draggable{width:150px;height:150px;padding:0.5em;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#draggable').draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>2. droppable
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<style type="text/css">
#draggable{width:100px;height:100px;padding:0.5em;float:left;margin:10px 10px 10px 0;}
#droppable{width:150px;height:150px;padding:0.5em;float:left;margin:10px;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#draggable').draggable();
$('#droppable').droppable({
drop:function(event,ui){ //drop 영역에 진입
$(this).addClass('ui-state-highlight')
.find('p').html('Dropped!');
},
out:function(event,ui){ //drop 영역을 벗어날 때
$(this).removeClass('ui-state-highlight')
.find('p').html('Drop here');
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>3. datepicker
1)
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#datepicker').datepicker({
showMonthAfterYear:true, //default 월 년
dateFormat:'yy-mm-dd',
dayNamesMin:['일','월','화','수','목','금','토'],
monthNames:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
});
});
</script>
</head>
<body>
<p>
Date : <input type="text" id="datepicker">
</p>
</body>
</html>2)
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#datepicker').datepicker({
showMonthAfterYear:true,
dateFormat:'yy-mm-dd',
dayNamesMin:['일','월','화','수','목','금','토'],
changeMonth:true,
//달을 변경하기 위해 changeMonth:true로 명시하면 달의 표기를 변경할 때
//monthNamesShort를 사용해야 정상 동작함
monthNamesShort:['1','2','3','4','5','6','7','8','9','10','11','12'],
changeYear:true
});
});
</script>
</head>
<body>
<p>
Date : <input type="text" id="datepicker">
</p>
</body>
</html>4. dialog
1)
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#dialog').dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>화면에 마치 윈도우 창처럼 보여지는 요소로 현재 화면을 벗어날 수 없지만 화면내에서는 이동이 가능함</p>
</div>
<div>
Welcome to My Page!!
</div>
</body>
</html>2)
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#dialog').dialog({
autoOpen:false, //수동으로 다이얼로그 열기
show:{
effect:'blind',
duration:1000
},
hide:{
effect:'explode',
duration:1000
}
});
//버튼 이벤트 연결
$('#opener').click(function(){
$('#dialog').dialog('open');
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>화면에 마치 윈도우 창처럼 보여지는 요소로 현재 화면을 벗어날 수 없지만 화면내에서는 이동이 가능함</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>3)
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#dialog').dialog({
resizable:false,
height:200,
modal:true,
buttons:{
'Delete all items':function(){ //공백이 있을 때는 따옴표("",'')로 감싸기
$(this).dialog('close');
},
Cancel:function(){
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Modal dialog">
<p>화면에 마치 윈도우 창처럼 보여지는 요소로 현재 화면을 벗어날 수 없지만 화면내에서는 이동이 가능함</p>
</div>
<div>
Welcome to My Page~~~
</div>
</body>
</html>