Merge 29d3662658 into 0cb2732fcc

index.html

@@ -154,7 +154,7 @@
             <li class="withripple" data-target="#navbar">Navbar</li>
             <li class="withripple" data-target="#progress-bar">Progress Bar</li>
             <li class="withripple" data-target="#slider">Slider</li>
-            <li class="withripple">Tabs (To do)</li>
+            <li class="withripple" data-target="#tabs">Tabs (To do)</li>
             <li class="withripple" data-target="#button">Button</li>
             <li class="withripple">Icon button (To do)</li>
             <li class="withripple" data-target="#floating-action-button">Floating Action Button</li>
@@ -864,6 +864,48 @@
               </style>
 
             </div>
+            <div class="well page" id="tabs">
+                <h1 class="header">Tabs</h1>
+                <div class="tab-page-group">
+                    <div class="toolbar">
+                        <ul class="tabs">
+                            <li><a href="javascript:void(0)">Tab 1</a></li>
+                            <li><a href="javascript:void(0)">Tab 2</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 1</a></li>
+                            <li><a href="javascript:void(0)">Tab 2</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 1</a></li>
+                            <li><a href="javascript:void(0)">Tab 2</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab 3</a></li>
+                            <li><a href="javascript:void(0)">Tab last</a></li>
+                        </ul>
+                    </div>
+                    <div class="tab-page active-page">
+                        I am the first tab
+                    </div>
+                    <div class="tab-page">
+                        I am the second tab
+                    </div>
+                    <div class="tab-page">
+                        I am the third tab
+                    </div>
+                </div>
+            </div>
             <div class="well page" id="material-colors">
               <h1 class="header">Material Color Samples</h1>
               <p>This is the list of all the supported color variations. Each color can be applied to every element that supports variations.</p>
@@ -1534,7 +1576,7 @@
     <script src="dist/js/material.min.js"></script>
     <script src="dist/js/ripples.min.js"></script>
     <script>
-      $.material.init();
+      //$.material.init();
     </script>
 
 

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;
+  }
+}

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) {