Tab UI 형태
위의 사진처럼 상단에 카테고리가 출력되고 카테고리 클릭시 하단의 내용이 변경되는 형태가 Tab UI 입니다. 전체 페이지가 로드되는것이 아닌, 카테고리 하단의 내용부분만 변경되는 형태를 가지고 있습니다. 이와 유사하지만 간단한 Tab UI를 구현해 보겠습니다.
Tab UI 구현하기
구현 요구사항
- Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출됩니다.
- 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출됩니다.
- 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 합니다.
- 화면에 추가하기 위해서 DOM API를 사용합니다.
- css, javascript, html 코드를 분리해 작업합니다.
프로젝트 구조
tabUi.css
@charset "UTF-8";
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;
}tabUiJs.js
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("{contents}", data[i].contents.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);
console.log(data);
makeTemplate(data, clickedName);
});
oReq.open("GET", url);
oReq.send();
}
var tabmenu = document.querySelector(".tabmenu");
tabmenu.addEventListener("click", function (evt) {
console.log(evt.target.innerText);
sendAjax("./js/json.txt", evt.target.innerText);
});
json.txt
[
{
"name" : "공연전시",
"contents" : ["공연전시 탭 내용입니다.", "공연전시1"]
},
{
"name" : "법률",
"contents" : ["법률 탭 입니다. ","법률 1"]
},
{
"name" : "동물공감",
"contents" : ["동물공감 탭입니다. ", "동물1"]
},
{
"name" : "연애결혼",
"contents" : ["연애 탭입니다.", "연애1"]
}
]
tabUi.html
<html>
<head>
<meta charset="UTF-8">
<title>tab ui test</title>
<link rel="stylesheet" type="text/css" href="./css/tabUi.css"/>
</head>
<body>
<body>
<h2> TAB UI TEST</h2>
<div class="tab">
<div class="tabmenu">
<div>공연전시 </div>
<div>법률 </div>
<div>동물공감 </div>
<div>연애결혼 </div>
</div>
<section class="content">
<h4>공연전시 탭 입니다. </h4>
<p>공연 탭 내용입니다.</p>
</section>
</div>
<script id="tabcontent" type="my-template">
<h4>{name} 탭입니다.</h4>
<p>{contents}</p>
</script>
</body>
<script src="./js/tabUiJs.js"></script>
</html>