[Web] tab 메뉴
tab 메뉴를 만들고 누를 때 마다 서로 다른 화면을 보여주는 코드다. ajax로 코드를 가져오기 전에 데이터를 그냥 같은 곳에 놔두고 구현해봤다.
그리고 아래는 ajax로 따로 만든 json 파일을 불러와 탭에 따른 내용을 출력하는 코드.
<script id="template-tab" type="text/template">
<h4>{title}</h4>
<p>{texts}</p>
</script>
<script>
var data=[{title:"sy",content:"this is sy"},
{title:"choi",content:"this is choi"},
{title:"jj",content:"this is jj"},
{title:"zini",content:"this is zini"}]
var html = document.querySelector("#template-tab").innerHTML;
var tab = document.querySelector(".tab");
var section = document.querySelector(".content");
tab.addEventListener('click',function(event){
var id = event.target.id;
var resultHTML;
for(var i=0;i<data.length;i++){
if(data[i].title==event.target.id){
resultHTML = html.replace("{title}",data[i].title)
.replace("{texts}",data[i].content);
}
}
section.innerHTML=resultHTML;
});
</script>
| cs |
그리고 아래는 ajax로 따로 만든 json 파일을 불러와 탭에 따른 내용을 출력하는 코드.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
text-align:center;
margin-bottom: 100px;
}
h2,h4{
margin:0px;
}
.tab{
width:600px;
margin:0px auto;
}
.tabmenu{
background-color: bisque;
}
.tabmenu>div{
display:inline-block;
width:140px;
margin: 0px;
text-align: center;
height: 50px;
line-height: 50px;
cursor:pointer;
}
.content{
background-color: antiquewhite;
padding:5%;
}
</style>
</head>
<body>
<h2>TAB UI TEST</h2>
<div class="tab">
<div class="tabmenu">
<div id="sy">sy</div>
<div id="choi">choi</div>
<div id="jj">jj</div>
<div id="zini">zini</div>
</div>
<section class="content" id="c">
<h4>main page</h4>
<p>this is, main!!</p>
</section>
</div>
</body>
<script id="tabcontent" type="my-template">
<h4>I am {name}</h4>
<p>I like {like}</p>
</script>
<script>
function makeTemplate(data,clickedName){
var html = document.getElementById("tabcontent").innerHTML;
var resultHTML ="";
for(var i=0,len = data.length;i<len;i++){
if(data[i].name === clickedName){
resultHTML = html.replace("{name}",data[i].name)
.replace("{like}",data[i].like.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){
//console.log(evt.target.innerText);
sendAjax("./tab_json.txt",evt.target.innerText);
});
</script>
</html>
| cs |
위의 코드의 문제점은 한 번 눌렀던 탭 메뉴를 또 누르면 또다시 ajax 통신이 수행된다는 것이다. 이미 한 번 불러왔던 data는 그 내용을 재사용하는 코드로 다시 짜봤다.
크게 달라진 점은 없고 한 번 데이터를 불러올 때 그 데이터를 저장해주는 dictionary 형 데이터(savedData)를 하나 만들었다.
그리고 ajax 통신을 요청하는 탭 메뉴의 클릭 이벤트 내부에서 key 값에 클릭한 탭의 요소가 있는지 확인 후 이미 저장된 데이터라면 저장된 데이터를 불러오고, ajax 통신은 이루어지지 않는다.
크게 달라진 점은 없고 한 번 데이터를 불러올 때 그 데이터를 저장해주는 dictionary 형 데이터(savedData)를 하나 만들었다.
var savedData ={};
function makeTemplate(data,clickedName){
var html = document.getElementById("tabcontent").innerHTML;
for(var i=0,len = data.length;i<len;i++){
if(data[i].name === clickedName){
resultHTML = html.replace("{name}",data[i].name)
.replace("{like}",data[i].like.join(", "));
savedData[clickedName]=resultHTML;
break;
}
}
document.querySelector(".content").innerHTML=resultHTML;
}
| cs |
그리고 ajax 통신을 요청하는 탭 메뉴의 클릭 이벤트 내부에서 key 값에 클릭한 탭의 요소가 있는지 확인 후 이미 저장된 데이터라면 저장된 데이터를 불러오고, ajax 통신은 이루어지지 않는다.
var tabmenu = document.querySelector(".tabmenu");
tabmenu.addEventListener("click", function(evt){
var clicked = evt.target.innerText;
for(key in savedData){
if(key==clicked){
document.querySelector(".content").innerHTML=savedData[clicked];
console.log("exist!");
return false;
}
}
sendAjax("./tab_json.txt",evt.target.innerText);
});
| cs |
No comments: