* Tab UI 형태
Tab UI는 많은 컨텐츠를 효과적으로 보여줄 수 있다. 아래와 같이 상단 메뉴를 누를 때마다, 새로 고침 없이 아래 내용이 변경되는 경우 사용한다.
-
* Tab UI에 필요한 기능
- Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출한다.
- 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출한다.
- 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 한다.
- 화면에 추가하기 위해서 DOM API를 사용한다.
* 실습 코드
- Tab UI가 동작하도록 JavaScript로 구현하기
<html>
<header>
<link rel="stylesheet" href="tabui.css">
<style>
h2 {
text-align: center
}
h2,
h4 {
margin: 0px;
}
.tab {
width: 600px;
margin: 0px auto;
}
.tabmenu {
background-color: bisque;
}
.tabmenu>div {
display: inline-block;
width: 146px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.content {
padding: 5%;
background-color: antiquewhite;
}
</style>
</header>
<body>
<h2> TAB UI TEST</h2>
<div class="tab">
<div class="tabmenu">
<div>crong</div>
<div>jk</div>
<div>pobi</div>
<div>honux</div>
</div>
<section class="content">
<h4>hello jk</h4>
<p>golf, facebook</p>
</section>
</div>
<script>
function makeTemplate(data, clickedName) {
var html = document.getElementById("tabcontent").innerHTML;
var resultHTML = "";
for (var i = 0; i < data.length; i++) {
if (data[i].name === clickedName) {
resultHTML = html.replace("{name}", data[i].name)
.replace("{favorites}", data[i].favorites.join(" "));
break;
}
}
document.querySelector(".content").innerHTML = resultHTML;
}
function sendAjax(url, clickedName) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function () {
var data = JSON.parse(oReq.responseText);
makeTemplate(data, clickedName);
});
oReq.open("GET", url);
oReq.send();
}
var tabmenu = document.querySelector(".tabmenu");
tabmenu.addEventListener("click", function (evt) {
sendAjax("./json.txt", evt.target.innerText);
});
</script>
<script id="tabcontent" type="my-template">
<h4>hello {name}</h4>
<p>{favorites}</p>
</script>
</body>
</html>
* 스타일 속성
-
가운데 정렬: margin: 0px auto;
-
가로 정렬: display: inline-block;
-
텍스트 가로로 중앙에 정렬: text-align: center;
-
텍스트 세로로 중앙에 정렬: line-height: center;
-
탭 위에 마우스 올렸을 때 포인터 주기: cursor: pointer;
