tweaked tabs code to return early

Dogfalo · May 21, 2016 · 1cd9d6b · 1cd9d6b
1 parent 13ce890
commit 1cd9d6b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 14 deletions.
diff --git a/bin/materialize.js b/bin/materialize.js
diff --git a/jade/page-contents/tabs_content.html b/jade/page-contents/tabs_content.html
@@ -118,6 +118,20 @@ <h4>Preselecting a tab</h4>
         </code></pre>
       </div>
 
+
+      <div id="external" class="section scrollspy">
+        <h4>Linking to an External Page</h4>
+          <p>By default, Materialize tabs will ignore their default anchor behaviour.  To force a tab to behave as a regular hyperlink, just specify the <code class="language-markup">target</code> property of that link!  A list of <code class="language-markup">target</code> values may be <a href="http://www.w3schools.com/tags/att_a_target.asp">found here</a>.</p>
+        <pre><code class="language-markup col s12">
+  &lt;li class="tab col s2">
+    &lt;a target="_blank" href="https://github.com/Dogfalo/materialize">External link in new window&lt;/a>
+  &lt;/li>
+  &lt;li class="tab col s2">
+    &lt;a target="_self" href="https://github.com/Dogfalo/materialize">External link in same window&lt;/a>
+  &lt;/li>
+        </code></pre>
+      </div>
+
     </div>
 
     <!-- Table of Contents -->
@@ -135,6 +149,7 @@ <h4>Preselecting a tab</h4>
             <li><a href="#method">Methods</a></li>
             <li><a href="#options">Options</a></li>
             <li><a href="#preselecting">Preselecting</a></li>
+            <li><a href="#external">External Links</a></li>
           </ul>
         </div>
       </div>

diff --git a/js/tabs.js b/js/tabs.js
@@ -25,7 +25,7 @@
 
       // If no match is found, use the first link or any with class 'active' as the initial active tab.
       if ($active.length === 0) {
-          $active = $(this).find('li.tab a.active').first();
+        $active = $(this).find('li.tab a.active').first();
       }
       if ($active.length === 0) {
         $active = $(this).find('li.tab a').first();
@@ -73,6 +73,11 @@
           return;
         }
 
+        // Act as regular link if target attribute is specified.
+        if (!!$(this).attr("target")) {
+          return;
+        }
+
         $tabs_width = $this.width();
         $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
 
@@ -115,11 +120,8 @@
           $indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
         }
 
-        // Prevent the anchor's default click action -- unless this tab
-        // opens an external link!
-        if ( !$(this).attr("target") ) {
-          e.preventDefault();
-        }
+        // Prevent the anchor's default click action
+        e.preventDefault();
       });
     });
 

diff --git a/tabs.html b/tabs.html
@@ -228,12 +228,16 @@ <h4>Preselecting a tab</h4>
         </code></pre>
       </div>
 
+
       <div id="external" class="section scrollspy">
         <h4>Linking to an External Page</h4>
-          <p>By default, Materialize tabs will ignore their default <code class="language-markup">&lt;a href></code> behaviour.  To force a tab to behave as a regular hyperlink, just specify the <code class="language-markup">target</code> property of that link!  A list of <code class="language-markup">target</code> values may be <a href="http://www.w3schools.com/tags/att_a_target.asp">found here</a>.</p>
+          <p>By default, Materialize tabs will ignore their default anchor behaviour.  To force a tab to behave as a regular hyperlink, just specify the <code class="language-markup">target</code> property of that link!  A list of <code class="language-markup">target</code> values may be <a href="http://www.w3schools.com/tags/att_a_target.asp">found here</a>.</p>
         <pre><code class="language-markup col s12">
   &lt;li class="tab col s2">
-    &lt;a target="_blank" href="https://github.com/Dogfalo/materialize">Test 3&lt;/a>
+    &lt;a target="_blank" href="https://github.com/Dogfalo/materialize">External link in new window&lt;/a>
+  &lt;/li>
+  &lt;li class="tab col s2">
+    &lt;a target="_self" href="https://github.com/Dogfalo/materialize">External link in same window&lt;/a>
   &lt;/li>
         </code></pre>
       </div>
@@ -332,4 +336,4 @@ <h5 class="white-text">Connect</h5>
     </script>
 
   </body>
-</html>
+</html>
diff --git a/test/html/tabs.html b/test/html/tabs.html
@@ -33,10 +33,8 @@
         <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
         <li class="tab"><a href="#test4">Test 4</a></li>
         <li class="tab"><a href="#test4">Test 5</a></li>
-        <li class="tab"><a href="#test4">Test 6</a></li>
-        <li class="tab"><a href="#test4">Test 7</a></li>
-        <li class="tab"><a href="#test4">Test 8</a></li>
-        <li class="tab"><a target="_blank" href="http://materializecss.com">External Link</a></li>
+        <li class="tab"><a target="_self" href="http://materializecss.com">Link in same window</a></li>
+        <li class="tab"><a target="_blank" href="http://materializecss.com">Link in new window</a></li>
       </ul>
     </div>