Created
July 17, 2017 08:43
-
-
Save jhyang12345/0ac6c2ce72c9cea840aa9a7c73e79381 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Tab = class { | |
constructor(id, selected, url) { | |
this.id = id; | |
this.selected = selected; | |
this.url = url; | |
this.addClickListener(); | |
} | |
addClickListener() { | |
var curElement = document.querySelector("#" + this.id); | |
curElement.addEventListener("click", this.ajaxResponse.bind(this)); | |
} | |
selectTab() { | |
this.selected = true; | |
} | |
unselectTab() { | |
this.selected = false; | |
} | |
ajaxResponse() { | |
var text_box = document.querySelector("#my_position"); | |
var oReq = new XMLHttpRequest(); | |
oReq.addEventListener("load", function () { | |
var result = this.responseText; | |
var data = JSON.parse(result); | |
console.log(data); | |
handleTextBox(text_box, data); | |
}); | |
console.log(this.url); | |
oReq.open("GET", this.url); | |
oReq.send(); | |
} | |
} | |
const TabHolder = class { | |
constructor(tablist) { | |
this.tablist = tablist; | |
} | |
listTabs() { | |
for(var i = 0; i < this.tablist.length; ++i) { | |
console.log(this.tablist[i]); | |
} | |
} | |
tabClicked(id) { | |
for(var i = 0; i < this.tablist.length; ++i) { | |
var cur = this.tablist[i]; | |
var tab = document.querySelector("#" + cur.id); | |
if(cur.id != id) { | |
cur.unselectTab; | |
tab.classList.remove("selectedTab"); | |
} else { | |
cur.selectTab; | |
tab.classList.add("selectedTab"); | |
var text_box = document.querySelector("#my_position"); | |
cur.ajaxResponse(null, cur.url); | |
} | |
} | |
} | |
} | |
function handleTextBox(text_box, data) { | |
var title = data["title"]; | |
var body = data["body"]; | |
text_box.querySelector(".myName").innerHTML = title; | |
text_box.querySelector(".myDesc").innerHTML = body; | |
} | |
document.addEventListener("DOMContentLoaded", function(event) { | |
var position = new Tab("position", true, "http://jsonplaceholder.typicode.com/posts/1"); | |
var friend = new Tab("friend", false, "http://jsonplaceholder.typicode.com/posts/2"); | |
var theme = new Tab("theme", false, "http://jsonplaceholder.typicode.com/posts/3"); | |
var news = new Tab("news", false, "http://jsonplaceholder.typicode.com/posts/4"); | |
var tabHolder = new TabHolder([position, friend, theme, news]); | |
tabHolder.listTabs(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment