Tabbed navigation is something that many of us encounter on a daily basis to some extent while browsing the web. We will be talking about how to create this effect with jQuery and have each tab loaded dynamically. I will work through an example based on a project I am currently developing as well as review what jQuery is for those that are new to the technology.
To achieve our tabbed navigation, and to do it dynamically, we are going to use the jQuery Javascript library. That in combination with some simple HTML/CSS can get you to have your own tabbed navigation system working on your site in no time.
On the jQuery site you will find versions of their library to include on your site, so you can download those. They are also hosted at Google Code so you can search for them there and just load the Google hosted versions if you’d rather do that. This is a bit more of an advanced tutorial. I may go back and write a more basic “Intro to jQuery” for those of you that are unfamiliar with the library. If this flies over your head bear with me as I’ll try and break it down as well as I can.
Let’s write some HTML for the navigation list.
This is just a pretty standard navigation setup. Take note of the class on the first list item as well as the extra div named “View_News”. This extra div is where the tabs are going to be dynamically loaded.
Let’s setup the jQuery needed for this navigation system now.
$(document).ready(function(){
$("#View_News").load("ajax/tab.php?tab=Home");
$("#nav li>a").click(function(){
$("#View_News").load($(this).attr("href"));
$("#nav li").each(function () {
$(this).removeClass("tab-selected");
});
$(this).parent().addClass("tab-selected");
return false;
});
});
Let’s step through this line by line.
The first line is how you start a jQuery section of code. The next line is setting the default tab to be loaded. We setup the HTML to have the Home tab as default, so here is where we get it to load the Home section.
This next section is the handler for the rest of the tabs and the browsing/loading of them. This event you are creating on this line is fired every time an anchor link, inside a list item in your nav section is clicked. You should be able to read that CSS selector if you have done CSS before. That brings up a good point about jQuery. CSS Selectors are its primary way of finding items in the DOM to manipulate. This makes it very easy to jump right into a project and get things moving fairly smoothly.
After you click that link we move to the next line which tells it to look up the href attribute of the link and then fetch that URL. It will then load it into the #View_News div. This handles the loading. Pretty simple huh!
This next section of code is going to handle changing the look and styling of the tabs. Normally we would make some visual styling to indicate which tab you are currently on. The way I chose to do it for this particular project goes like this.
We first clear the class of all of the tabs, the default look and feel for the tabs in your CSS should be the ‘not selected’ style. Then I search the DOM for the parent object of the Anchor link we just clicked. Knowing that the parent is always going to be a list item, and that it will be the one that I will need to style as the ’selected’ tab. That is how I build the final line, adding the class to the list item that we want to reflect the tab we are on.
Now you are thinking “What the heck is this ‘tab.php’ in his links?”. Well that is the script that I wrote that handles what section is returned (based off of the querystring) as well as what format it is sent back. There are many ways to do this in a fully programmed PHP file. The most simple way that you may want to test with is by creating stand alone html files with juts the code you want to go into the #View_News div. It will then load them just the same. Using the PHP files there just allows you to get into more advanced things to be loaded and done.
There you have it, a basic tabbed navigation system that you could use for any number of things on your site!
Let’s take this a bit further and talk about some of the advanced features that could be added to this example. Some of you might be thinking “Why return full chunks of HTML, isn’t that passing much more data than you would need to?”. The quick answer is “Yes, maybe”. The slickest way to do this would be to have your tab.php return a JSON object and then you could style that data in the jQuery and build it that way. It should be faster. I could see myself changing what I’m working on to going that way but as it stands my timers say that I am able to make a call for the page, and have my version of tab.php gather the data and style it and return it in under 0.0005 seconds. If I were to see these numbers get higher, or page draws to be delayed then I might think about moving over to a JSON object setup.
This new tabbed navigation is going to be showing up on the new Game Gossip. Keep an eye out for the announcement for when we launch the alpha of that site very soon!
That is it for today. Hopefully you can no go ahead and implement your very own tabbed navigation system using jQuery. If you set one up feel free to link to it in a comment!
