The most popular method of creating tabs using CSS is the Sliding Doors method.
Tutorial Details:
Some of the features you get with these ajax tabs:-
1.Easy to implement Dynamic CSS Tabs. The user can add and remove tabs (and content) without refreshing the page.
2.The ability to specify default open tabs
3.The ability for the website owner to specify which tabs can and cannot be closed after they are opened
4.The ability to assign a different color to each tab. This makes it easier to 'group' tabs with similar content.
5.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.
6.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.
7.Tested to work with Firefox 1.0, 1.5 and IE 6
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.
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:
tabOpentab_page3 = function() { alert("You opened page #3"); };
tabClosetab_page3 = function() { return confirm("Are you sure you want to close this tab?"); };
tabFocustab_page3 = function() { alert("Page #3 focused"); };
tabBlurtab_page3 = function() { alert("Page #3 blured"); };
Page 3
Refresh This Tab
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.
Read
Tutorial at: Click here to view the tutorial
Rate Tutorial: Ajax tabs
View Tutorial: Ajax tabs
Related
Tutorials:
|
Java Tip 77: Enable copy and paste functionality
between Swing's JTables and Excel - JavaWorld