Skip to content

Instantly share code, notes, and snippets.

@tong9433

tong9433/tabUI.css

Last active July 17, 2017 23:58
Show Gist options
  • Save tong9433/d4ee3a239a4661bdc93ada5907648666 to your computer and use it in GitHub Desktop.
Save tong9433/d4ee3a239a4661bdc93ada5907648666 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tabUI.css
header,nav,section,div,footer,ul,dd {margin:0;padding:0;}
li{list-style: none;}
ul{
width: 100%;
}
dt {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 5px;
}
dl {
float: left;
width : 100%;
}
dd {
font-size: 0.9em;
}
.wrapper{
height: 3000px
}
.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: 100%;
margin: 0px auto;
}
.userSNSInfo > li {
display: inline-block;
margin-right: 5px;
width : 150px;
}
.userSNSInfo span.count {
color : #1FB820;
text-align: center;
width: 150px;
}
.mainView > nav {
text-align:
height:40px;
margin-top: 10px;
overflow: auto;
border-bottom: 1px solid rgb(228, 228, 228);
border-top: 1px solid rgb(228, 228, 228);
}
.navi{
top: 247px;
width: 100%;
position: absolute;
clear: both;
}
.tab {
border-right: 1px solid rgb(228, 228, 228);
height:100%;
display: inline-block;
line-height: 40px;
text-align: center;
width:19%;
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;
}
.section>div:nth-child(1){
font-size: 20px;
margin-bottom: 20px;
}
.section>div:nth-child(2){
font-size: 15px
}
#sec{
padding: 10%;
text-align: center;
top:300px;
width: 80%;
position: absolute;
}
.blog{
border-radius: 10px;
width: 100%;
margin-bottom: 80px;
background-color: lightgray;
padding: 10px;
z-index:-1;
}
.comment{
border-radius: 10px;
color: white;
font-size:12px;
background-color: gray;
margin: 10px;
padding: 10px;
}
.dropbtn {
text-align: center;
height: 10px;
line-height: 10px;
background-color: #4CAF50;
color: white;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
padding-left: 10px;
color: black;
padding-top: 5px;
padding-bottom: 5px;
display: block;
font-size: 11px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.dropbox{
float: left;
width: 110px;
z-index: 1;
position: relative;
}
#sec > li > a {
text-align: center
-webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-moz-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-ms-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-o-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
display: block;
max-width: 180px;
width: 40px;
font-size: 13px;
margin: 0 auto;
text-decoration:none;
height: 20px;
margin-top: 20px;
margin-bottom: 10px;
line-height: 20px;
border-radius: 4px;
padding: 10px 10px;
}
#sec > li > a.button {
color: rgba(30, 22, 54, 0.6);
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#sec > li > a.button:hover {
color: rgba(255, 255, 255, 0.85);
box-shadow: rgba(30, 22, 54, 0.7) 0 0px 0px 40px inset;
}
Raw
tabUI.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="/static/tabUI.css">
</head>
<body>
<div id="wrapper">
<div class="mainView" >
<header class="mainHeader" ><img src="http://cfile28.uf.tistory.com/image/231D7337595F73E505C2CC" width="80" >
<div class="userId" ><span > </span><span >Tong</span><span > </span>
</div>
<div class="userMessage" ><span > </span><span >tongil Song 입니다. ajax 실습</span><span > </span>
</div>
<ul class="userSNSInfo" >
<li ><span >phone : </span><span class="count" >010 4331 6657</span></li>
<li ><span >major : </span><span class="count" >math, computer</span></li>
<li ><span >following : </span><span class="count" >300000</span></li>
</ul>
</header>
<script id="searchTemplate" type="text/x-handlebars-template">
{{#this}}
<a>{{this}}</a>
{{/this}}
</script>
<script id="tabTemplate" type="text/x-handlebars-template">
<h1> {{title}} </h1> </br> <span> {{body}}</span>
</script>
<div class="dropbox">
<div class="dropdown" id="search">
<div class="dropbtn" id="searchBtn">실시간 검색어 </div>
<div class="dropdown-content" id="searchSec"></div>
</div>
</div>
<nav class="navi" id="navi">
<div class="tab selectedTab" name="1" id="basic">position</div>
<div class="tab" name="2" id="basic" >friend</div>
<div class="tab" name="3" id="basic" >theme</div>
<div class="tab" name="4" id="basic" >repository</div>
<div class="tab" name="5" id="blog" >우형블로그 </div>
</nav>
<script id="blogTemplate" type="text/x-handlebars-template">
{{#this}}
</br>
<li class="blog">
<div style="text-align: center; font-size: 15px" class="content"><h2>{{title}}</h2></div>
<div style="text-align: right; margin-right: 30px; font-style: italic;">{{date}}</div>
<div class="comment">
{{description}}
</div>
<a class="button" href="{{href}}">더보기 </a>
</li>
{{/this }}
</br>
</script>
<div id="sec">
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/handlebarsjs/4.0.8/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script type="text/javascript" src="/static/tabUI2.js"></script>
</body>
</html>
Raw
tabUI2.js
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
const basicTab = new TabClick('navi','tabTemplate','','sec');
basicTab.setEvent('selectedTab','basic');
const blogTab = new TabClick('navi','blogTemplate','http://localhost:3000/static/result.json','sec')
blogTab.setEvent('selectedTab', 'blog');
const searchTab= new SearchRank('dropbox','searchTemplate','http://rank.search.naver.com/rank.js','searchSec')
searchTab.setEvent('search')
});
//ajax 를 처리해주는 유틸 클래스
class Util{
ajax(url,func){
const oReq = new XMLHttpRequest();
oReq.addEventListener('load', function(e) {
const data = JSON.parse(oReq.responseText);
func.setData(data);
});
if(!!document.getElementsByClassName('selectedTab')[0].getAttribute('name')&&func.url!='http://rank.search.naver.com/rank.js'){
func.url='http://jsonplaceholder.typicode.com/posts/'+document.getElementsByClassName('selectedTab')[0].getAttribute('name')
}
oReq.open('GET',func.url);
oReq.send();
}
}
// tab을 눌렀을때 발생하는 이벤트를 만들어 주는 클래스
class TabClick{
constructor(container, template, url, sec) {
this.container = container;
this.template = template;
this.url = url;
this.sec = sec;
this.data = [];
this.setHtmlInit()
}
setHtmlInit(){
this.container = document.getElementById(this.container);
this.template = document.getElementById(this.template).innerHTML;
this.sec = document.getElementById(this.sec);
}
getData(){
const util=new Util();
util.ajax(this.url,this);
}
setEvent(classname, id){
this.container.addEventListener('click',function(e){
const selectTab = document.getElementsByClassName(classname)[0];
selectTab.classList.remove(classname);
e.target.classList.add(classname);
this.selectedTab = document.getElementsByClassName(classname)[0];
if(this.selectedTab.getAttribute('id')===id){
this.getData(this);
}
}.bind(this),false);
}
setData(data){
this.data=data;
const context = this.data;
const tmpl = Handlebars.compile(this.template);
this.sec.innerHTML=tmpl(context);
}
}
//TabClick를 상속 받고 있고 검색어 순위 탭을 구현해주는 클래스
class SearchRank extends TabClick{
setEvent(id){
const searchBtn = document.getElementById(id);
searchBtn.addEventListener('mouseenter',function(){
if(this.data[10]!=new CurrentTime().getTime()+' 기준'){
this.getData();
}
}.bind(this))
}
setData(parsedata){
for(var i=0;i<10;i++){
this.data[i]=(i+1)+'위 '+'- '+parsedata.data[0].data[i].keyword;
}
this.data[10]= new CurrentTime().getTime()+' 기준';
super.setData(this.data);
}
}
//현재 시간을 알려주는 클래스
class CurrentTime{
constructor(){
const d = new Date();
this.year=d.getFullYear();
this.month=d.getMonth()+1;
this.date=d.getDate();
this.hour=d.getHours();
if(d.getMinutes()<10){
this.minute='0'+d.getMinutes();
}else{
this.minute=d.getMinutes();
}
}
getTime(){
return this.year+'/'+this.month+'/'+this.date+' '+this.hour+':'+this.minute
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment