Adding support for is_hover to Tabs

Adding is_hover support for tabs. Handy for building megamenus whilst using existing tab functionality.
foundation · Mar 27, 2014 · 68547c7 · 68547c7
1 parent 645f025
commit 68547c7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/doc/includes/examples_javascript_data_options.html b/doc/includes/examples_javascript_data_options.html
@@ -303,10 +303,14 @@
       <td>1</td>
     </tr>
     <tr>
-      <td rowspan="1">Tab</td>
+      <td rowspan="2">Tab</td>
       <td>active_class</td>
       <td>'active'</td>
     </tr>
+    <tr>
+      <td>is_hover</td>
+      <td>false</td>
+    </tr>
     <tr>
       <td rowspan="6">Tooltip</td>
       <td>additional_inheritable_classes</td>

diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js
@@ -11,7 +11,8 @@
       active_class: 'active',
       callback : function () {},
       deep_linking: false,
-      scroll_to_content: true
+      scroll_to_content: true,
+      is_hover: false
     },
 
     default_tab_hashes: [],
@@ -35,12 +36,18 @@
       var self = this,
           S = this.S;
 
-      // Click event: tab title
-      S(this.scope).off('.tab').on('click.fndtn.tab', '[' + this.attr_name() + '] > dd > a', function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        self.toggle_active_tab(S(this).parent());
-      });
+      S(this.scope)
+        .off('.tab')
+        .on('click.fndtn.tab', '[' + this.attr_name() + '] > dd > a', function (e) {
+          var settings = S(this).closest('[' + self.attr_name() +']').data(self.attr_name(true) + '-init');
+          e.preventDefault();
+          e.stopPropagation();
+          if (!settings.is_hover || Modernizr.touch) self.toggle_active_tab(S(this).parent());
+        })
+        .on('mouseenter.fndtn.tab', '[' + this.attr_name() + '] > dd > a', function (e) {
+          var settings = S(this).closest('[' + self.attr_name() +']').data(self.attr_name(true) + '-init');
+          if (settings.is_hover) self.toggle_active_tab(S(this).parent());
+        });
 
       // Location hash change event
       S(window).on('hashchange.fndtn.tab', function (e) {