Skip to content

Instantly share code, notes, and snippets.

@crongro

crongro/advanced.css

Last active October 20, 2015 09:02
Show Gist options
  • Save crongro/78cc59be06a8dddbf99e to your computer and use it in GitHub Desktop.
Save crongro/78cc59be06a8dddbf99e to your computer and use it in GitHub Desktop.
Download ZIP
ADVANCED
Raw
advanced.css
header,nav,section,div,footer,ul,dd {margin:0;padding:0;}
li{list-style: none;}
dt {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 5px;
}
dl {
float: left;
width : 75%;
}
dd {
font-size: 0.9em;
}
.mainHeader{
height:200px;
text-align: center;
padding-top: 20px;
line-height: 1.4em
}
.userId {
font-size: 1.2em;
font-weight: bold;
}
.userMessage, .userSNSInfo {
font-size: 0.8em;
color : gray;
}
.userSNSInfo {
overflow: auto;
width: 255px;
margin: 0px auto;
}
.userSNSInfo > li {
float: left;
margin-right: 5px;
width : 80px;
}
.userSNSInfo span.count {
color : #1FB820;
}
.mainView > nav {
height:40px;
margin-top: 10px;
overflow: auto;
border-bottom: 1px solid rgb(228, 228, 228);
border-top: 1px solid rgb(228, 228, 228);
}
.tab {
border-right: 1px solid rgb(228, 228, 228);
float:left;
height:100%;
line-height: 40px;
text-align: center;
width:24.5%;
cursor: pointer;
}
.tab:last-child {
border-right: 0px;
}
.mainView > section {
display:none;
padding:8%;
line-height: 1.5em;
}
.mainView > section.eleDisplayShow {
display:block;
padding:8%;
line-height: 1.5em;
}
.myName {
font-size: 1.2em;
font-weight: bold;
}
.myDesc {
font-size: 0.8em;
}
.eleDisplayShow li {
margin-bottom: 8%;
}
.selectedTab {
background-color: #DF9274;
color: #fff;
}
Raw
advanced.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>tabUI</title>
<link rel="stylesheet" href="advanced.css">
</head>
<body>
<div id="wrapper">
<div class="mainView" >
<header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" width="80" >
<div class="userId" ><span > </span><span >nigayo</span><span > </span>
</div>
<div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span>
</div>
<ul class="userSNSInfo" >
<li ><span >review : </span><span class="count" >10</span><span > | </span>
</li>
<li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > | </span>
</li>
<li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span>
</li>
</ul>
</header>
<nav >
<div class="tab selectedTab" id="position" ><span > </span><span >내 장소</span><span > </span>
</div>
<div class="tab" id="friend" ><span > </span><span >친구</span><span > </span>
</div>
<div class="tab" id="theme" ><span > </span><span >나의 테마</span><span > </span>
</div>
<div class="tab" id="news" ><span > </span><span >나의 소식</span><span > </span>
</div>
</nav>
<section id="my_position" class="eleDisplayShow" >
<ul >
<li >
<div class="myName" >판교 유스페이스</div>
<div class="myDesc" >IT인들이 주로 먹는 밥집</div>
</li>
</ul>
</section>
<section id="my_friend"> </section>
<section id="my_theme" > </section>
<section id="my_news"> </section>
</div>
</div>
<script>
//main page
myTabView = {
init : function() {
},
registerCallback : function() {
}
}
//main page
myContentView = {
init : function() {
},
update : function() {
},
};
utils = {
sendAjax : function(sAjaxURL, fnCallback) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(e) {
var htData = JSON.parse(oReq.responseText);
fnCallback(htData);
});
oReq.open("GET", sAjaxURL);
oReq.send();
},
getChildOrder : function(elChild) {
var elParent = elChild.parentNode;
var nIndex = Array.prototype.indexOf.call(elParent.children, elChild);
return ++nIndex;
}
};
//초기화 작업을 합니다.
(function(){
document.addEventListener("DOMContentLoaded", function() {
myTabView.init();
myContentView.init();
myTabView.registerCallback({
"after" : myContentView.update.bind(myContentView)
});
});
})();
</script>
</body>
</html>
Raw
advanced_completed.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>tabUI</title>
<link rel="stylesheet" href="./title_files/advanced.css">
</head>
<body>
<div id="wrapper">
<div class="mainView" >
<header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" width="80" >
<div class="userId" ><span > </span><span >nigayo</span><span > </span>
</div>
<div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span>
</div>
<ul class="userSNSInfo" >
<li ><span >review : </span><span class="count" >10</span><span > | </span>
</li>
<li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > | </span>
</li>
<li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span>
</li>
</ul>
</header>
<nav >
<div class="tab selectedTab" id="position" ><span > </span><span >내 장소</span><span > </span>
</div>
<div class="tab" id="friend" ><span > </span><span >친구</span><span > </span>
</div>
<div class="tab" id="theme" ><span > </span><span >나의 테마</span><span > </span>
</div>
<div class="tab" id="news" ><span > </span><span >나의 소식</span><span > </span>
</div>
</nav>
<section id="my_position" class="eleDisplayShow" >
<ul >
<li >
<div class="myName" >판교 유스페이스</div>
<div class="myDesc" >IT인들이 주로 먹는 밥집</div>
</li>
</ul>
</section>
<section id="my_friend"> </section>
<section id="my_theme" > </section>
<section id="my_news"> </section>
</div>
</div>
<script>
var SK = {};
//Store.
SK.myStore = {
data : {},
save : function(key, data) {
this.data[key] = data;
}
}
//main page
SK.myTabView = {
init : function() {
this.initVars();
this.registerEvents();
},
initVars : function() {
this.els = utils.assignValues({
previousSelectedTab : ".selectedTab",
previousSelectedContent : ".eleDisplayShow",
nav : ".mainView nav",
});
this.DATA = {
selectedTabClassName : "selectedTab",
nonSelectedTabClassName :"tab"
}
},
registerEvents : function() {
var that = this;
this.els.nav.addEventListener("click", this.changeClassNameListener.bind(that));
},
changeClassNameListener : function (evt) {
var elDiv = (evt.target.nodeName ==="DIV") ? evt.target : evt.target.parentNode;
elDiv.className += " "+ this.DATA.selectedTabClassName;
this.els.previousSelectedTab.className = this.DATA.nonSelectedTabClassName;
this.els.previousSelectedTab = elDiv;
var nOrder = utils.getChildOrder(elDiv);
this.htCallback["after"].call(null,nOrder);
},
registerCallback : function(htCallback) {
this.htCallback = htCallback;
}
};
//main page
SK.myContentView = {
init : function() {
//do something
this.initVars();
},
initVars : function() {
this.els = utils.assignValues({
previousSelectedContent : ".eleDisplayShow",
});
this.DATA = {
sHTML : "<ul > <li > <div class='myName' >{{title}}</div> <div class='myDesc' >{{body}}</div> </li> </ul>",
}
},
update : function(nOrder) {
if(SK.myStore.data[nOrder]) {
this.updateView(nOrder, SK.myStore.data[nOrder]);
return;
}
var sAjaxURL = "http://jsonplaceholder.typicode.com/posts/" + nOrder;
utils.sendAjax(sAjaxURL, this.updateView.bind(SK.myContentView, nOrder));
},
updateView : function (nOrder, htData) {
var sTitle = htData.title;
var sBody = htData.body;
var sTemplate1 = "{{title}}";
var sTemplate2 = "{{body}}";
var sResult = this.DATA.sHTML.replace(sTemplate1, sTitle).replace(sTemplate2, sBody);
var elSelectedDiv = document.querySelector("section:nth-of-type("+ nOrder +")");
elSelectedDiv.innerHTML = sResult;
elSelectedDiv.className = "eleDisplayShow";
this.els.previousSelectedContent.className = "";
this.els.previousSelectedContent = elSelectedDiv;
//cache data
SK.myStore.save(nOrder, htData);
},
};
utils = {
$ : function(sSelector) {
return document.querySelector(sSelector);
},
assignValues : function(elList) {
for (key in elList) {
elList[key] = this.$(elList[key]);
}
return elList;
},
sendAjax : function(sAjaxURL, fnCallback) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(e) {
var htData = JSON.parse(oReq.responseText);
fnCallback(htData);
});
oReq.open("GET", sAjaxURL);
oReq.send();
},
getChildOrder : function(elChild) {
var elParent = elChild.parentNode;
var nIndex = Array.prototype.indexOf.call(elParent.children, elChild);
return ++nIndex;
}
};
//초기화 작업을 합니다.
(function(){
document.addEventListener("DOMContentLoaded", function() {
SK.myTabView.init();
SK.myContentView.init();
SK.myTabView.registerCallback({
"after" : SK.myContentView.update.bind(SK.myContentView)
});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment