Javascript And CSS Tutorial - Dynamic Tabbed Panels

A classic user interface design element is the tabbed panel - in fact the browser you are using right now probably uses tabs. There are many styles and designs for tabbed panels on web pages as well, but tend to be static. Here, we are going to create a tabbed panel using javascript that you can add tabs to on the fly.

The above is a working example using the code in this tutorial. You can add tabs and panel content by typing them in the corresponding textboxes. Each time the 'Add Tab' button is clicked, a new tab will be added to the control with your content. I placed a limit of 6 tabs on this example, but in reality, you could have an unlimited number of tabs. The names are limited to 6 characters so they do not overflow the width of the tab. In practice, you'd probably want to implement auto ellipsing so long tab names are automatically truncated.

The rest of this tutorial will guide you through the process of creating tab controls similar to the one shown in the above example.

The HTML

We'll start by creating a div that just holds our tabs and panels. My style sheet sets the width of this div to 500 pixels, but that value can be changed to fit your needs.

Now we need a table that will hold the tabs. The tabs will be stored in a row inside this table called "mainTabArea". The one empty cell already placed in this row is used to fill the rest of the row not currently occupied by tabs. The height of "mainTabArea" controls how tall your tabs will be. For this example, I set them to 20 pixels. The "return false" in the onselectstart event prevents the tab's text from being selected. This is especially important since most browsers will select an element's text when a user double clicks. The tabHolder CSS class also contains a Mozilla specific style for preventing text selection: "-moz-user-select:none".

The next thing we need to do is create a div named "mainPanelArea" to hold the contents of each tab panel. This div is located directly underneath the table holding our tabs and controls how tall your panels will be. For this example, I set the height to 50 pixels.

That's all the HTML needed to create the above tabbed panel example. Of course, this is not the only possible set up for the tabs and the panels. The important thing is to have a table row in which we can insert new tabs, and a div into which we can insert the panels.

The CSS

Below is the style sheet used to create the above example. You can modify any of these values to create your desired tab panel.

The Javascript

Now for the javascript code. We are going to define a javascript class, so that you can have multiple tab panels on a single page (you would just need to instantiate the object multiple times - one for each tabbed panel). First off, the declaration:

You might wonder 'why is he declaring a function?'. Well, in javascript, the word function is also used to declare classes. You will see more of how this works as we see more of the code. Here, the object takes a unique sting as a name ("controllerName"), the html element for holding the tabs ("mainTabArea"), and the html element for holding the panels ("mainPanelArea").

Now for some fields:

Here we are setting a couple of fields to the values passed in, as well as initializing some others. The comments should do a pretty good job explaining what the fields are. All of these fields are public, so they can be modified after the object has been instantiated - such as the css style names.

Now for a long one - let's add a function to the TabbedPanel class called CreateTab. This function takes a string that will be the displayed name of the new tab.

And now for the explanation in English. Let's break this function up and see what each piece does.

First off, we create the ids for the new tab and panel. We want to make sure that they are ids that we can recreate later, so that we can use getElementById - but we also need to make them unique. So we concatenate the tabbed panel name, the word 'Tab' (or 'Panel' if this is the panel id), and a number (which is what is unique to this tab/panel combination).

Next, we create the panel div. Usually, people just append to the innerHTML of an element to add new html to a page, but in this case we actually need a reference to the created element. So instead, we use the function 'createElement' - which does exactly what the name says. The functions returns the new div element, and in the next few lines we set all of the needed properties. Depending on what you might want to use tabbed panels for, you might want to change or add to those properties.

Once the panel has been created, we insert it into the DOM. Here we use one method for IE, and a second (standard) method for everybody else (IE, of course, does not implement the standard method).

Next, we create the tab cell for this panel. Here, we use a method available on table rows - insertCell. This takes the position to insert the cell at (in this case we are passing it before the end filler cell described in the HTML section - potentially you could insert it wherever you wanted to) and returns the newly created cell. Again we set a number of the properties of the cell - including the onClick method (which we have not yet defined), the contents of the cell (here the string passed in when CreateTab was called), and a reference to the current object (used later on in the onClick method). After all the properties have been defined, we call the method TabClickEl - which we have not yet defined. It will do the work of raising the given tab cell and its associated panel - because here we assume that the newly created tab/panel should be the visible one.

The final work that this method does is increment the tabNumber field (so the next new tab has a unique number) and then return the new panel (so that the caller can fill the new panel with whatever is supposed to go there).

Another major method in the object is TabClickEl (which is short for TabClickElement, because the argument the function takes is a tab cell element). This function, as mentioned above, does the raising and lowering of tabs and panels.

The first if statement does a very simple check - if the tab you are trying to raise is already raised, don't do anything. Otherwise, if there is a currently raised tab, lower it, and if there is a currently visible panel, hide it. Now, if the tab cell passed in is null, don't raise anything. Next try and get the panel associated with the passed in tab - by recreating the panel id, and using getElementById. If the panel doesn't exist, don't raise anything and return. If the panel does exist, set the current high fields to the newly raised tab and panel, set the tab style to the style for raised tabs, and make the panel visible. Nothing particularly surprising here.

Now that we can create and select tabs, lets take a look at how we can close them. Getting rid of the tab and its associated panel is actually pretty simple - the slightly annoying thing is if the tab that is disappearing is the currently selected tab. If it is, then we need to figure out what tab should now become selected.

The function expects to be handed a tab cell element to deal with (which is why it is called TabCloseEl). First off, if that element is null, then there isn't anything to close, so we return. Next we check to see if the tab being closed is the currently selected tab - and if it is, drop into code to determine what tab will now be selected.

First we create a variable to store the index of the tab that will get selected, and set it to -1 (the 'nothing will get selected' number). Then we check to see if the tab being removed is the last tab left on the tabbed panel (because if it is, there won't be a new tab to select). The way we do this is by checking how many cells are currently contained by the tabContainer - and if it is 2 or less, this is the only cell left. The reason it is 2 or less (not 1 or less) is again because of the filler cell. If there are other cells that can be selected, we set the to-be-selected index variable to the index of the to-be-deleted cell and check to see if it is the right-most cell. If it is we decrement the index, otherwise we increment it. This is because the usual behavior for tabs is to select the tab to the right when the current tab is removed, but if the selected tab is the right-most tab, there is nothing to the right to select - so instead we select the tab to the left.

Now that we have an index, we check to see if it is greater than 0 (i.e., not the -1 'nothing will get selected' value), and if it is, we call TabClickEl on the cell to be selected (which we get by pulling it out of tabContainer using the index). If the index was still -1, we call TabClickEl on 'null' - which causes the current tab to be deslected, but nothing new to be selected.

Now that that is all out of the way, we can actually get around to deleting the tab. We get the panel associated with the tab by recreating the panel's id, do a quick check to make sure it actually exists (because, hey, you never know), and then remove it from the panel container. And finally, we delete the cell from the tab container using the cell index.

One more function to define in this object, and that is the onclick method that is attached to each of the tab cells. It is pretty short, because all it does in the end is call TabClickEl.

Here, we first get the target that caused the call of this function (i.e., the tab cell). It is not exactly clean, thanks to IE, which does not follow the standard for getting event targets. Once we have the tab cell, we call TabClickEl on that tab cell. You might wonder why the code doesn't look like:

Well, I wish it did, but unfortunately that does not work. I don't exactly know why, but when the function is called through an event, 'this' is undefined - it seems the event does not know what instance of the class the function was attached to. So instead, we use a workaround. Back in the tab cell creation, we attached a reference to the object to the cell. So here, we use that reference to call the correct TabClickEl function.

And here is what all the javascript code looks like together:

Putting It All Together

So how do we use the TabbedPanel object to dynamically create tabs? Once the above code is implemented, creating tabs is a very simple process. Let's start with the HTML created at the beginning of this tutorial.

The only thing left to do is create an instance of the TabbedPanel class and start creating tabs.

This should give you a jumping off point to do whatever you want to do with tabbed panels. If you'd like to see these tabs in action, Gaming Textures uses tab controls very similar to those created in this tutorial.