.net technique jquery
Clean and simple Our site incorporates simple, semantically clean and extensible jQuery tab system for breaking content up into navigable sections within a single page
Icing on the cake We’ve added some transition effects as well including a sliding notch indicator for the active tab, and cross-fading content
We first take the distance of the current anchor from the left edge of the navigation (180px), and to this we need to add Y. To calculate Y, we take half the width of the current tab anchor then subtract half the width of our indicator. In this example, Y is 65px, so the left value for our indicator would be 245px. We’ll now extend our tabs code, writing an event callback function to animate the indicator as the user navigates. The Tabs plug-in raises a JavaScript event to which you can attach event callbacks. In this case we’ll be using one called onBeforeClick. As its name suggests, this event fires when we click a tab anchor, but before performing any of the actual tab switching behaviour. There’s also an onClick, but as this only fires
Event callback
We’re using the jQuery Tools plug-in, which makes setting up tabs incredibly easy after the tab switching (including the fading transition) has finished, it won’t produce the right effect for us. We’ll first set up some variables to hold useful values that we’ll need to perform the animation. We’ve written this before the call to the jQuery Tools Tabs plug-in so that our new variables are initialised and ready for use within the Tabs function itself: $(function() { var indicator = $('#indicator'), indicatorHalfWidth = indicator.width()/2, lis = $('#tabs').children('li'); $("#tabs").tabs("#content section", { ... On line 2, we save a reference to our indicator element to a variable called indicator. If you’re going to be referring to a DOM element repeatedly, it’s more efficient to do this rather than using a jQuery $ selector to repeatedly search the DOM for the same element(s). The second variable we create on line 3 is the width of the indicator element divided in half, and the variable on line 4 is an array of all the list items in our navigation.
Expert tip Easing equations Easing equations are mathematical functions that give us more interesting, non-linear animations by varying the speed of the animation over time. There are a wide variety of equations available for most JavaScript frameworks. We included the jQuery Easing Equations library so that we could make our indicator move with sharp acceleration and deceleration for a more natural look to the animation. You can find out more about the jQuery and see demonstrations of the various equations at ntrn.cc/961SeP.
<prev
82
.net october 2010
Now let’s write our event callback in the configuration of our Tabs function: ...fadeInSpeed: 400, onBeforeClick: function(event, index) { var li = lis.eq(index), newPos = li.position().left + (li.width()/2) - indicatorHalfWidth; indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo'); } }); On line 2 we’ve added the header for our onBeforeClick event callback function. We are given two parameters associated with our event; event is a reference to the event itself, which we won’t need. The second, index, is the number of the tab that was clicked, with 0 being the first tab. On line 3 we fetch the specific list item element we’re going to examine by looking it up in our list item array. The eq jQuery function reduces our array of list items to the one specified by the index value. Line 4 is where we calculate the new left value for our indicator. Look back at the diagram to see how we came up with this formula.
Animation
All that remains is to perform the animation, which we do on line 5. We first call stop(true) on the indicator, which cancels any animations currently in progress as well as any that are queued. We’re then calling jQuery’s animate function, animating the left CSS property to our calculated value (newPos). The second parameter to the animate function is a 600ms duration for the animation. The third, easeInOutExpo is the name of an easing equation, which is optional. See Expert tip, below left, for more on easing equations. And that’s it – we’re done! We now have our content sectioned up and navigable using our tab anchors, as well as a sexy custom effect with our sliding notch indicator. The jQuery code covered in this tutorial is available on this issue’s CD, or for download as a single plug-in package at ntrn.cc/b9W6wo, with the added option of being able to create vertical navigation as well as horizontal. l
About the authors Name Ben Bodien Company Neutron Creations Site neutroncreations. com Areas of expertise Front-end engineering Languages I can speak English, some French and a tiny bit of Arabic
Name Marc Roberts Company Neutron Creations Site neutroncreations. com Areas of expertise Web app development Languages English; basic conversation in French and German; learning Italian