thyncology

First, the code again:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    $(function() {
      $(".tab").click(function(){
        var tabset = $(this).parents(".tabset");
        tabset.find(".active_tab").removeClass("active_tab");
        $(this).addClass("active_tab");
 
        var old_content = tabset.find(".active_tab_content");
 
        old_content.fadeOut("fast", function(){
          old_content.removeClass("active_tab_content");
          var index = tabset.find(".tab").index(tabset.find(".active_tab")[0]);
          var current_content = $(tabset.find(".tab_content")[index]);
          current_content.addClass("active_tab_content");
          current_content.fadeIn("fadeIn");
        });
      });
    });

Line 1 calls the $ function. This function is known as the selector, and is quite powerful in jQuery. Using CSS syntax, you can narrow your selection down to a single item, or select every instance of a particular type of element on a page. Our example here shows a special use of the $ function which, when passed a literal function or function name, simply calls that function when the DOM has finished loading. That sentence (and this whole paragraph) is a bit loaded, so let’s take a moment to cover the topics presented in it.

Functions are chunks of code which a programmer defines (languages also come with many functions pre-defined) to perform a given task or tasks any time he needs them done. Functions are callable, meaning you can run them at any time simply by invoking their names, and occasionally passing them some parameters if the functions in question make use of custom input. In JavaScript, you define a reusable function simply by writing: function funcname() {//some code here}

Here, we’ve seen a variation of this, called a function literal or anonymous function, which is useful if you need to define a function which will never be called directly anywhere in your code. This anonymous function is passed to $() as its only parameter.

The DOM, or Document Object Model, is the browser’s in-memory construct of the Web page. JavaScript provides plenty of built-in functions for dealing with the DOM, but jQuery and similar libraries make it even easier to deal with than the native functions.

Within the special call to the function $(), there is another call to $(). This second call is the normal usage, and takes CSS-style selector syntax to select an element or group of elements. In this case, we’ve selected all tab elements, for the purpose of adding an event handler. An event handler is a block of JavaScript (a function) which executes when an object receives a specific event, which in this case is the “click” event. (accomplished by calling the click() function of the selected group of elements) As you might guess, this means that when the tab is clicked, it will react by executing the code therein. This code, as we’ll see, is an anonymous function.

Anonymous functions are just like regular functions, only they have no names, so they can’t be called directly. Anonymous functions are useful when you have a piece of functionality you want to assign to something and don’t want to bother setting up and calling a function. So it’s a shortcut, and smart programmers love shortcuts. Within this anonymous event handler, we find the entire encompassing tabset of the clicked-on tab (which itself is obtained by calling $(this)). jQuery provides many handy functions for navigating through the DOM structure, with less fuss than the native DOM code available in your browser. The function parents is one of these. It obtains any matching parent element of the element object it is called on, in this case finding the containing div with “tabset” for set in its class attribute. We assign this tabset to a local variable named, appropriately, tabset. Local variables cease to exist when they are no longer needed. In programming jargon this is referred to as going out of scope.

We then find the currently-active tab within that tabset using the similar find() function. Now that we have the pieces we need to fade from current tab to new tab, we’re good to set things in motion. On to the effect call. First we remove the “active_tab” class from the recently-active tab, and add the class to the just-clicked tab. We do so by calling removeClass(). This function takes a string of the class name you want to remove. This has the effect of switching the tabs themselves. But now we’ve got to deal with the content area.

Calling fadeOut on the old_content object, (which we obtain via another find() we pass it two parameters. The first is the string “fast”, which ensures that our effect will run at a decent clip and not leave the user tapping his fingers as he waits for the animation to finish so he can get on with browsing the content. (or worse, he leaves the page!) The second parameter, as you may have noticed, is another anonymous function. Good eyes on you, holmes.

This new anonymous function is what’s referred to as a callback. Callback functions are automatically called when some event occurs, in this case when the fadeOut animation finishes. Our second anonymous function removes the class “active_tab_content” from the currently-active tab’s corresponding content (now that it’s hidden no one can see the change happen!) by calling removeClass(). After this, we obtain the index (that is, the location within a group of items, most frequently an array) of the just-clicked tab. This is the most complex line in our code. We’ve crammed 3 function calls on one line. Two calls to find() and another to index(). This new function is of interest. index() allows you to obtain the index of a particular object from within a collection. The collection is obtained by the first call to find(), grabbing all tabs. We want the index of the new “active_tab” element, which was the just-clicked tab. We pass the second find() call’s results to the index function and get back a number referencing the tab’s position among all tabs in the tabset. We store this number in another local variable.

To obtain a reference to the current content area, we run a find for all “tab_content” elements and then selectively grab only the proper-index item from the collection. This code assumes you store content areas in the same order as their tabs, naturally. Now that we have the current_content variable pointing to the newly-current content, we can add the class “active_tab_content” to it (by calling addClass()) and fade it in using the cleverly-named fadeIn() function.

Reading this code can be a bit tough at first, particularly so if you’ve never dealt with a) function literals, b) chaining, or c) programming at all! To recap on the first two topics:

Function literals, aka anonymous functions, are a shortcut when you don’t need to call a function by name and only need to assign it once to a parameter of a function call or object literal.

Chaining has not yet been discussed by name, but you’ve seen examples of it in the code. Chaining is a technique used in jQuery and other libraries wherein you combine multiple function calls into a single line. It is more compact, and arguably more readable on many occasions. Any code like "func().func().func()" is a function chain. In jQuery, each function returns the current set of objects or the current object, which can be modified/filtered by subsequent calls in the same chain.

Try playing with different aspects of the code and figuring out what works and what doesn’t. And of course ask questions when you can’t figure it out!