mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 00:19:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

intial material tabs

Browse Source
This commit is contained in:
nzv 2015-06-10 19:07:02 +03:00
parent 275fc55199
commit b6065af538
3 changed files with 155 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
tabs/tabs.css Normal file
View File

@ -0,0 +1,72 @@
.tab-page {
display: none;
}
.active-page {
display: block;
}
body {
margin: 0;
background: #E5E5E5;
color: #404040;
}
.toolbar {
background: #03A9F4
}
.tabs {
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
margin-left: 16px;
}
.tabs li {
float: left;
display: inline;
}
.tabs a {
position: relative;
color: white;
text-decoration: none;
text-transform: uppercase;
display: block;
width: 100px;
height: 50px;
text-align: center;
line-height: 52px;
font-weight: 700;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
overflow: hidden;
}
.tabs .active a {
color: white;
}
.tabs .active a:after {
height: 2px;
width: 100%;
display: block;
content: " ";
bottom: 0px;
left: 0px;
position: absolute;
background: #FFFF8D;
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
}
.tab-page {
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
padding-top: 50px;
padding-left: 50px;
overflow: hidden;
}

43
tabs/tabs.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tabs.css">
<script src="tabs.js"></script>
</head>
<body>
<div class="toolbar">
<ul class="tabs" id="example-tabs">
<li class="tab-one active"><a href="#">Tab 1</a></li>
<li class="tab-two"><a href="#">Tab 2</a></li>
<li class="tab-three"><a href="#">Tab 3</a></li>
</ul>
</div>
<div id="tab-one" class="tab-page active-page">
I am the first tab
</div>
<div id="tab-two" class="tab-page">
I am the second tab
</div>
<div id="tab-three" class="tab-page">
I am the third tab
</div>
<script>
/*
Initialize the tabs
*/
window.onload = function () {
var div = document.getElementById('example-tabs');
var exampleTabs = new MaterialTabs(div);
};
</script>
</body>
</html>

40
tabs/tabs.js Normal file
View File

@ -0,0 +1,40 @@
var MaterialTabs = function (elem) {
//get tab objects and store as pane + tab
var activeTabObject;
var TabObject = function () {
var self = this;
this.tab; //element
this.pane; //element
this.setClick = function () {
self.tab.addEventListener('click', self.showThisTab)
};
this.showThisTab = function () {
if (self !== activeTabObject) {
//change the tab page and update the active tab
activeTabObject.pane.className = activeTabObject.pane.className.replace('active-page', '');
activeTabObject.tab.className = activeTabObject.tab.className.replace('active', '');
self.pane.className = self.pane.className + ' active-page';
self.tab.className = self.tab.className + ' active';
activeTabObject = self;
}
};
};
var ul = elem;
var i;
var items = ul.getElementsByTagName("li");
for (i = 0; i < items.length; ++i) {
var tab = new TabObject();
tab.tab = items[i];
var classString = items[i].className;
var className = classString.split(' ')[0];
tab.pane = document.getElementById(className);
tab.setClick();
if (classString.indexOf('active') > -1) {
activeTabObject = tab;
}
}
};