From 150407ea39f12f35dc506b07dcd4084979e7659e Mon Sep 17 00:00:00 2001 From: Steve Schwartz Date: Mon, 21 Mar 2011 02:27:19 -0400 Subject: [PATCH] Added demo page for collapsible and cancel event features. Added useful data to event hooks. --- examples/collapsible-and-cancel.html | 57 ++++++++++++++++++++++++++++ javascripts/jquery.easytabs.js | 12 +++--- 2 files changed, 63 insertions(+), 6 deletions(-) create mode 100644 examples/collapsible-and-cancel.html diff --git a/examples/collapsible-and-cancel.html b/examples/collapsible-and-cancel.html new file mode 100644 index 0000000..40067ac --- /dev/null +++ b/examples/collapsible-and-cancel.html @@ -0,0 +1,57 @@ + + + + + JQuery EasyTabs Demo – Basic - Alfa Jango Blog + + + + + + + + +
+ +
+
+

Heading 1

+

This is the content of the first tab.

+
+
+

Heading 2

+

Stuff from the second tab.

+
+
+

Heading 3

+

More stuff from the last tab.

+
+
+
+ + diff --git a/javascripts/jquery.easytabs.js b/javascripts/jquery.easytabs.js index 26f2706..ccc337d 100644 --- a/javascripts/jquery.easytabs.js +++ b/javascripts/jquery.easytabs.js @@ -165,7 +165,7 @@ if( opts.collapsible && ! skipUpdateToHash && ($clicked.hasClass(opts.tabActiveClass) || $clicked.hasClass(opts.collapsedClass)) ) { $panels.stop(true,true); - if( fire($container,"easytabs:before") ){ + if( fire($container,"easytabs:before", [$clicked, $targetPanel, data]) ){ $tabs.filter("." + opts.tabActiveClass).removeClass(opts.tabActiveClass).children().removeClass(opts.tabActiveClass); if( $clicked.hasClass(opts.collapsedClass) ){ $clicked.parent() @@ -177,7 +177,7 @@ $targetPanel .addClass(opts.panelActiveClass) [transitions.uncollapse](transitions.speed, function(){ - $container.trigger('easytabs:midTransition'); + $container.trigger('easytabs:midTransition', [$clicked, $targetPanel, data]); if(typeof callback == 'function') callback(); }); } else { @@ -185,14 +185,14 @@ $targetPanel .removeClass(opts.panelActiveClass) [transitions.collapse](transitions.speed, function(){ - $container.trigger("easytabs:midTransition"); + $container.trigger("easytabs:midTransition", [$clicked, $targetPanel, data]); if(typeof callback == 'function') callback(); }); } } } else if( ! $clicked.hasClass(opts.tabActiveClass) || ! $targetPanel.hasClass(opts.panelActiveClass) ){ $panels.stop(true,true); - if( fire($container,"easytabs:before") ){ + if( fire($container,"easytabs:before", [$clicked, $targetPanel, data]) ){ var $visiblePanel = $panels.filter(":visible"), showPanel = function(){ $targetPanel @@ -200,7 +200,7 @@ // Save the new tabs and panels to the container data (with new active tab/panel) $container.data("easytabs").tabs = $tabs; $container.data("easytabs").panels = $panels; - $container.trigger("easytabs:after"); + $container.trigger("easytabs:after", [$clicked, $targetPanel, data]); // callback only gets called if selectTab actually does something, since it's inside the if block if(typeof callback == 'function'){ callback(); @@ -217,7 +217,7 @@ $targetPanel.addClass(opts.panelActiveClass); // At this point, the previous panel is hidden, and the new one will be selected - $container.trigger("easytabs:midTransition"); + $container.trigger("easytabs:midTransition", [$clicked, $targetPanel, data]); if ( opts.updateHash && ! skipUpdateToHash ) { //window.location = url.toString().replace((url.pathname + hash), (url.pathname + $clicked.attr("href"))); // Not sure why this behaves so differently, but it's more straight forward and seems to have less side-effects