From b6065af538f14e2ddbb8c96bfd8790e52f9cd3eb Mon Sep 17 00:00:00 2001 From: nzv Date: Wed, 10 Jun 2015 19:07:02 +0300 Subject: [PATCH] intial material tabs --- tabs/tabs.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++ tabs/tabs.html | 43 ++++++++++++++++++++++++++++++ tabs/tabs.js | 40 ++++++++++++++++++++++++++++ 3 files changed, 155 insertions(+) create mode 100644 tabs/tabs.css create mode 100644 tabs/tabs.html create mode 100644 tabs/tabs.js diff --git a/tabs/tabs.css b/tabs/tabs.css new file mode 100644 index 00000000..6b6167d3 --- /dev/null +++ b/tabs/tabs.css @@ -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; +} diff --git a/tabs/tabs.html b/tabs/tabs.html new file mode 100644 index 00000000..28b90b15 --- /dev/null +++ b/tabs/tabs.html @@ -0,0 +1,43 @@ + + + + + + + + + + + +
+ +
+ +
+ I am the first tab +
+ +
+ I am the second tab +
+ +
+ I am the third tab +
+ + + + diff --git a/tabs/tabs.js b/tabs/tabs.js new file mode 100644 index 00000000..f48e2c72 --- /dev/null +++ b/tabs/tabs.js @@ -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; + } + } + +};