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