Custom jQuery Tools Tab transitions
Todays challenge was to alter the transferring of tabs from in jQuery tools, I wanted a side bar I had positioned Outside the tabs to only be shown on one tab, the solution I came up with was to create a custom effect which you then use as the effect when initialising the tab.
$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
var conf = this.getConf(),
speed = conf.fadeOutSpeed,
panes = this.getPanes();
var $tab = this.getCurrentTab();
if($tab.attr("id") == "wanted"){//Going AWAY from the tab, do hide animation (before the tab is hidden)
$("ul.tabs.summaries").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
//This is then end of the chain - my animation, hide all then fade in new tab.
});
}else{//going away from any other tab
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
}
$tab = this.getTabs().eq(tabIndex);
if($tab.attr("id") == "wanted"){//Going to my special tab.
$("ul.tabs.summaries").animate({"left" : "-160px"}, 300);//Sliding it out
}
// the supplied callback must be called after the effect has finished its job
done.call();
});
Posted on February 4, 2011, in jQuery, jQuery Tools. Bookmark the permalink. Leave a Comment.


Leave a Comment
Comments (0)