datepicker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({//속성을 추가하려면 중괄호를 합니다.
dayNamesMin:['일','월','화','수','목','금','토'],
monthNames:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
});
//버튼 클릭하면 데이트 픽커에서 선택한 날짜가 alert 창으로 뜨도록 today date
$('#dateBtn').click(function() {
alert("Today date:"+$('#datepicker').val());
})
});
</script>
</head>
<body>
Date: <input type="text" id="datepicker">
<input type="button" value="날짜확인" id="dateBtn">
</body>
</html>
tabs
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body>
<!-- tab 전체가 선택자로 되어 있습니다. 현재는 tab a태그에 있는 것들이 페이지에 있는 내용으로 되어 있지만
이후에는 DB에 있는 값을 가져와야 합니다. 그렇기 위해서 customizing합니다. content1,2,3로 링크를 연결합니다.
-->
<div id="tabs">
<ul>
<li><a href="tabpage/content1.jsp">서울</a></li>
<li><a href="tabpage/content2.jsp">대전</a></li>
<li><a href="tabpage/content3.jsp">대구</a></li>
</ul>
</div>
</body>
</html>
menu
customizing
Framework
|
MyBatis
Spring MVC
AOP
image Processing
|
FullyConnected
|
ANN
DNN
Cnn
Oracle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#menu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li><div>Framework</div>
<ul>
<li><div><a href="https://mybatis.org/mybatis-3/ko/index.html">MyBatis</a></div></li>
<li><div>Spring MVC</div></li>
<li><div>AOP</div></li>
</ul>
</li>
<li><div>image Processing</div>
<ul>
<li><div>FullyConnected</div>
<ul>
<li><div>ANN</div></li>
<li><div>DNN</div></li>
<li><div>CNN</div></li>
</ul>
</li>
</ul>
</li>
<li><div><a href = "http://oracle.com">Oracle</a></div></li>
</ul>
</body>
</html>
'컴퓨터 프로그래밍 > 수업' 카테고리의 다른 글
| 2020.06.02 (0) | 2020.06.02 |
|---|---|
| 2020.06.1_1 (0) | 2020.06.01 |
| 2020.05.29_1 (0) | 2020.05.29 |
| 2020.05.28_2 (0) | 2020.05.28 |
| 2020.05.28_1 (0) | 2020.05.28 |
