Merge pull request #9 from jellekralt/master

Added a tab activation callback
samsono · Aug 5, 2013 · 66891a7 · 66891a7
2 parents 5c346ab + c52b1b9
commit 66891a7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/Index.html b/Index.html
@@ -33,6 +33,9 @@
                 display: none;
             }
         }
+        #tabInfo {
+            display: none;
+        }
     </style>
 </head>
 <body>
@@ -72,6 +75,12 @@ <h2 style="background: #7BC5FF; margin:30px 0 20px; padding: 1%; width: 98%;">De
                 </div>
             </div>
         </div>
+        <br />
+
+        <div id="tabInfo">
+            Selected tab: <span class="tabName"></span>
+        </div>
+
         <br />
         <br />
         <!--vertical Tabs-->
@@ -134,7 +143,8 @@ <h2>How to use</h2>
         $("#demoTab").easyResponsiveTabs({
             type: 'default', //Types: default, vertical, accordion           
             width: 'auto', //auto or any custom width
-            fit: true   // 100% fits in a container
+            fit: true,   // 100% fits in a container
+            activate: function() {} // Callback function, gets called if tab is switched
         });
         </code></pre>
             <br />
@@ -147,7 +157,17 @@ <h2>How to use</h2>
         $('#horizontalTab').easyResponsiveTabs({
             type: 'default', //Types: default, vertical, accordion           
             width: 'auto', //auto or any width like 600px
-            fit: true   // 100% fit in a container
+            fit: true,   // 100% fit in a container
+            closed: 'accordion', // Start closed if in accordion view
+            activate: function(event) { // Callback function if tab is switched
+                var $tab = $(this);
+                var $info = $('#tabInfo');
+                var $name = $('span', $info);
+
+                $name.text($tab.text());
+
+                $info.show();
+            }
         });
 
         $('#verticalTab').easyResponsiveTabs({

diff --git a/README.md b/README.md
@@ -51,7 +51,9 @@ How to use
         $("#demoTab").easyResponsiveTabs({
             type: 'default', //Types: default, vertical, accordion           
             width: 'auto', //auto or any custom width
-            fit: true   // 100% fits in a container
+            fit: true,   // 100% fits in a container
+            closed: false, // Close the panels on start, the options 'accordion' and 'tabs' keep them closed in there respective view types
+            activate: function() {}  // Callback function, gets called if tab is switched
         });
 
 

diff --git a/js/easyResponsiveTabs.js b/js/easyResponsiveTabs.js
@@ -7,15 +7,25 @@
             var defaults = {
                 type: 'default', //default, vertical, accordion;
                 width: 'auto',
-                fit: true
+                fit: true,
+                closed: false,
+                activate: function(){}
             }
             //Variables
             var options = $.extend(defaults, options);            
             var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
 
+            //Events
+            $(this).bind('tabactivate', function(e, currentTab) {
+                if(typeof options.activate === 'function') {
+                    options.activate.call(currentTab, e)
+                }
+            });
+
             //Main function
             this.each(function () {
                 var $respTabs = $(this);
+                var $respTabsList = $respTabs.find('ul.resp-tabs-list');
                 $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
                 $respTabs.css({
                     'display': 'block',
@@ -59,10 +69,12 @@
                     $tabItem.attr('aria-controls', 'tab_item-' + (count));
                     $tabItem.attr('role', 'tab');
 
-                    //First active tab                   
-                    $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
-                    $respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
-                    $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
+                    //First active tab, keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode 
+                    if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {                  
+                        $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
+                        $respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
+                        $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
+                    }
 
                     //Assigning the 'aria-labelledby' attr to tab-content
                     var tabcount = 0;
@@ -98,6 +110,8 @@
                             $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
                             $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
                         }
+                        //Trigger tab activation event
+                        $currentTab.trigger('tabactivate', $currentTab);
                     });
                     //Window resize function                   
                     $(window).resize(function () {