JQuery TabContainer Theme with Tab Transition Animations
A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls. A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs. While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition.
JQuery Tab Theme
Creating this JQuery theme wasn't too difficult. I grabbed one of the stylesheets from a theme I had created before and tweaked the style attributes to what was required to look like the JQuery tabs. My JQuery themed stylesheet is divided into 3 sections: common styles, styles for the inactive tabs and finally the styles for the active tab. Just like with the previous tab theme sample, I am making use of a single image sprite that contains both the background image for the active and inactive tabs.
In the common style section I define the font characteristics for the control, the common styles for both active and inactive tabs as well as the style I want applied to the tab body.
The inactive JQuery tabs use a light green image for the background and have a single pixel of white space between the tab header and the tab body. Also, if you look closely at the background images I am using for the tab headers, both the left and right edges of the image is slightly rounded. To make sure this rounded appearance is visible, I added a margin to the outer and inner style classes. Also notice how I am forcing the ajax__tab_outer background image to align to the right (so the right rounded edge is visible) and the ajax__tab_inner image aligns to the left for the same reason.
The style rules for the active tab is very similar. The main difference is that the background rule includes an offset and the margin is removed.
Creating the TabAnimationExtender
Now that we have the JQuery theme created, we can move on to building the component that handles the animation. The animation effect I have implemented in the demo is a FadeIn Animation. Of the ones I saw on the JQuery site, this is the one I liked the best. Just like the ModalPopup example, to implement this feature I created a new extender control - the TabAnimationExtender. This control contains a single property (OnActiveTabChanged) of type Animation. Assuming that I have already added the markup to the page for a TabContainer control with ID 'jquery', the following shows how I tell my new extender control to fade in the tab's body when the selected tab changes. Because I have not specified any attributes for the FadeIn Animation all of the default values are used (duration = 1 sec, frames per sec = 25, max opacity = 1, min opacity = 0).
When the TabAnimationExtender's client side behavior is initialized, it is passed the HTML DIV element that is the container element of the tab. In this initialize function, I find the DIV node that has the ajax__tab_body class applied to it. Once I have found this node, I use it to initialize the client side component for the Animation I want to run for the tab transitions. I use the body DIV instead of the DIV container because I don't want the animation to include the header tabs. In the last initialization step, I fetch the behavior for the TabContainer and attach to the activeTabChanged event. The handler for this event is where I run the transition animation.
Things I learned ...
Well that's about it for the implementation details. However I did learn a few new items that I thought I would pass along.
1. The FadeAnimation isn't great about cleaning up after itself too well. I noticed this before with a few of our UpdatePanelAnimationExtender's that use a FadeAnimation. After the fade has completed, the control looks slightly blurry. Checkout the 2 images below. The one on the left is how the text originally is rendered in IE7 on my Vista PC. The image on the right is what it looks like after the animation has run. It's not nearly as crisp. I don't have this problem on my IE6/XP machine.
I used the IE Developer Toolbar to try to troubleshoot this. I narrowed it down to the filter style that is applied. If I use the developer toolbar to delete the filter style, the text looks good again. I couldn't find a good way to programmatically accomplish this, the closest I came was to run a ScriptAction that runs after the Fade to remove the filter from the cssText. Anyone run into this or know of a good solution?
2. The TabContainer doesn't have a BehaviorID, so to fetch the client side behavior you will need to use the ClientID for the TabContainer - you will have to take NamingContainer's into account.
That's it. Enjoy!