diff --git a/index.html b/index.html index 128fde7b..abc0fd2b 100644 --- a/index.html +++ b/index.html @@ -154,7 +154,7 @@
  • Navbar
  • Progress Bar
  • Slider
    • -
  • Tabs (To do)
    • +
  • Tabs (To do)
  • Button
  • Icon button (To do)
  • Floating Action Button
    • @@ -864,6 +864,48 @@ +
    +

    Tabs

    +
    +
    + +
    +
    + I am the first tab +
    +
    + I am the second tab +
    +
    + I am the third tab +
    +
    +

    Material Color Samples

    This is the list of all the supported color variations. Each color can be applied to every element that supports variations.

    @@ -1534,7 +1576,7 @@ diff --git a/less/_tabs.less b/less/_tabs.less index 234ae521..67bd2afa 100644 --- a/less/_tabs.less +++ b/less/_tabs.less @@ -22,3 +22,64 @@ } } + +.tab-page-group { + overflow: hidden; + .toolbar { + background: #03A9F4; + height: 50px; + overflow: hidden; + .tabs { + list-style: none; + overflow: hidden; + padding: 0; + margin: 0 16px; + li { + float: left; + display: inline; + position: relative; + a { + position: relative; + color: white; + text-decoration: none; + text-transform: uppercase; + display: block; + padding: 0 16px; + height: 50px; + text-align: center; + line-height: 52px; + font-weight: 700; + font-size: 14px; + color: rgba(255, 255, 255, 0.6); + overflow: hidden; + &:after { + height: 0; + width: 100%; + display: block; + content: " "; + bottom: 0; + left: 0; + position: absolute; + background: #FFFF8D; + transition: all 0.1s cubic-bezier(0.4, 0.0, 1, 1); + } + } + &.active a { + color: white; + &:after { + height: 2px; + } + } + } + } + } + .tab-page { + display: none; + box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4); + padding: 50px; + overflow: hidden; + } + .active-page { + display: block; + } +} diff --git a/scripts/material.js b/scripts/material.js index 315a43ec..068d6815 100644 --- a/scripts/material.js +++ b/scripts/material.js @@ -29,6 +29,7 @@ "radio": true, "arrive": true, "autofill": false, + "tabs": true, "withRipples": [ ".btn:not(.btn-link)", @@ -36,6 +37,7 @@ ".navbar a:not(.withoutripple)", ".dropdown-menu a", ".nav-tabs a:not(.withoutripple)", + ".tab-page-group .toolbar .tabs > li:not(.withoutripple)", ".withripple" ].join(","), "inputElements": "input.form-control, textarea.form-control, select.form-control", @@ -172,6 +174,60 @@ clearInterval(focused); }); }, + "tabs": function() { + var dragging = null, + current = null, + startPos = 0; + $(".tab-page-group").each(function() { + var group = $(this), + pages = group.find(".tab-page"), + activePage = pages.eq(0), + tabs = group.find(".toolbar > .tabs > li"), + width = 0; + + tabs.click(function() { + var targetPage = pages.eq($(this).index()); + if (targetPage.length > 0 && targetPage.index() !== activePage.index()) { + targetPage.css("display", "block"); + activePage.css("display", "none"); + activePage = targetPage; + tabs.removeClass("active"); + $(this).addClass("active"); + } + }).each(function() { + width += $(this).width(); + }).eq(0).addClass("active"); + group.find(".toolbar").width(width).on("mousedown touchstart", function(e) { + startPos = e.pageX; + dragging = $(this); + e.preventDefault(); + return false; + }); + }); + $("body").on("mousemove", function(e) { + var offset = e.pageX - startPos; + if (dragging !== null) { + if (current === null) { + current = parseFloat(dragging.css("margin-left")); + } + if (current + offset > 0) { + startPos = e.pageX; + dragging.css("margin-left", 0); + current = null; + } else if (Math.abs(current + offset) + dragging.parent().width() > dragging.width()) { + offset = (dragging.parent().width() - dragging.width()); + startPos = e.pageX; + dragging.css("margin-left", offset); + current = null; + } else { + dragging.css("margin-left", current + offset); + } + } + }).on("mouseup touchend", function() { + dragging = null; + current = null; + }); + }, "init": function() { if ($.fn.ripples && this.options.ripples) { this.ripples(); @@ -191,6 +247,9 @@ if (this.options.autofill) { this.autofill(); } + if (this.options.tabs) { + this.tabs(); + } if (document.arrive && this.options.arrive) { if ($.fn.ripples && this.options.ripples) { diff --git a/tabs/tabs.css b/tabs/tabs.css deleted file mode 100644 index 6b6167d3..00000000 --- a/tabs/tabs.css +++ /dev/null @@ -1,72 +0,0 @@ -.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 deleted file mode 100644 index 69d69b88..00000000 --- a/tabs/tabs.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - -
    - -
    - -
    - 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 deleted file mode 100644 index f48e2c72..00000000 --- a/tabs/tabs.js +++ /dev/null @@ -1,40 +0,0 @@ -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; - } - } - -};