CSS Tabs seem to be all the rage with the kids these days. I love the idea of them. It seems that the most popular method of creating tabs using CSS is the Sliding Doors method. They seem to look the coolest and are very easy to implement. However, they're so... static.I've taken the idea of the sliding door tabs and mixed them up with a little javascript and ajax to make them very dynamic on the client side.Some of the features you get with these ajax tabs:

• Easy to implement Dynamic CSS Tabs. The user can add and remove tabs (and content) without refreshing the page.
• The ability to specify default open tabs
• The ability for the website owner to specify which tabs can and cannot be closed after they are opened
• The ability to assign a different color to each tab. This makes it easier to 'group' tabs with similar content.
• Ajax Preloading Goodness. When a tab is opened, the contents of the tab's panel are loaded with ajax. You can open a tab while the user is focused on a different tab. The newly opened tab will preload it's content in the background and wait for the user to click the new tab when he or she is ready to.
• Tab Events. Each tab can have it's own javascript code that will be triggered when a certain event happens. Such as Open, Close, Blur and Focus.
• Tested to work with Firefox 1.0, 1.5 and IE 6

There are two parts to these ajax tabs. The tabs, and the panels: Download all the files needed for the demo. (Because this demo uses ajax, you'll need to put these files on a webserver. They won't run locally on your machine unless your workstation has a webserver running.) Pretty simple stuff. You'll notice that when the page is opened, the function OpenTab() gets called. That's the function that opens up the first tab. Take a look at the tabs.js documentation below to see what all the arguments for OpenTab do. tabs.js functions:

---

OpenTab(tabId, tabLabel, tabURL, tabIsCloseable, tabColor)This function creates a new tab or focuses on a tab if it already exists. tabId is a string that you create to give to this tab so that it can be accessed later. tabLabel is a string that is displayed on the tab itself. tabURL is a string the url to the page that contains the content that will be loaded with ajax. tabIsCloseable is a boolean (true or false) that specifies if the tab will have the "X" button that can close itself. tabColor is a string that specifies which css groups to use for this tab and panel.

---

CreateNewTab(tabId, tabLabel, tabURL, tabIsCloseable, tabColor)You should never need to directly call this function, as OpenTab will call it if it needs to. The arguments are them same as OpenTab().

---

SetTabURL(tabId, url)This function allows you to change the URL to the tab's content after you have already opened the tab. Changing the URL also refreshes the content. tabId is the tabId of the tab you set when you created it. url is the url of the content.

---

CloseTab(tabId)Closes the tab that has the id: tabId

---

GetFocusedTabId()Returns the tabId of the tab that is currently focused

---

FocusTab(tabId)Changes the focus to the tab with tab Id: tabId.

---

RefreshTab(tabId)Refreshes the content of the tab with tab Id: tabId

---

TabExists(tabId)Returns true or false depending on if a tab with tabId exists.

---

Callback Events If the page that one of the tabs opens contains a hidden div tag with specially formatted javascript functions, those functions will be run by the ajax tabs. Take a look at the demo's page #3 source below: The name of the function for the open event would be: tabOpen[tabId]. Replace the [tabId] part with the tabs actual tabId. Page #3's tabId is tab_page3 so that's why the open function's name is tabOpentab_page3. Why put this code in a div tag instead of a script tag? Well, because IE doesn't handle it very well. You can't reference a script element with an ID in IE. Well that's it. If I left anything out or something doesn't make sense, let me know. If anyone tests it in a browser besides Firefox or IE, let me know how it works.