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.
Maybe the first thing you ought to do is to take a look at this demo so you know what I'm talking about.
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
Take a look at the code:
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.)To get started, you need some html:
<html> <head>
<title>havocStudios: Ajax Tabs Demo</title>
<style type="text/css" media="screen">@import "tabs.css";</style>
<script src="ajax.js" type="text/javascript"></script>
<script src="tabs.js" type="text/javascript"></script>
<script type="text/javascript">
function doOnLoad() {
OpenTab("tab_page1", "Page 1", "page1.html", false, '');
}
</script>
</head>
<body onload="doOnLoad()">
<div id="tabContainer">
<div id="tabs">
<ul id="tabList">
</ul>
</div>
<div id="tabPanels"></div>
</div>
</body>
</html>
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.
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.
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 EventsIf 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:
<div>
<div id="script_tab_page3" style="display:none;">
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"); };
</div>
Page 3<br/>
<a href="javascript:void(0)" onclick="RefreshTab('tab_page3');">Refresh This Tab</a>
</div>
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.
http://www.havocstudios.com/ajaxTabs/demo.html 查看效果
今天浏览csdn时发现的,曾经在别的网站上看到过这个例子的实际使用.
经过更改代码,使用点击按钮事件后从外部加载到iframe网页,可扩展性好,加载速度快,不用一次同时加载N个页面当需要时点击相应的页面即可,点击查看效果.http://www.sft800.com/tab/demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>havocStudios: Ajax Tabs Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Demo of havocStudios ajax tabs">
<meta name="keywords" content="tabs ajax css ">
<style type="text/css" media="screen">@import "tabs.css";
</style>
<script src="ajax.js" type="text/javascript"></script>
<script src="tabs.js" type="text/javascript"></script>
<script type="text/javascript">
function LoadPage_1() {
OpenTab("tab_page1", "Page 1", "page1.html", false, '');
}
function LoadPage_2() {
OpenTab("tab_page2","Page 2","page2.html", false ,'');
}
function LoadPage_3() {
OpenTab("tab_page3","Page 3","page3.html", false ,'');
}
</script>
</head>
<body>
<div id="tabContainer" onmouseover="this.style.cursor='hand'">
<div id="tabs" onmouseover="this.style.cursor='hand'">
<ul id="tabList" onclick="LoadPage_1()">
<INPUT id="Button1" type="button" value="Button" name="Button1" onclick="LoadPage_1()">
<INPUT id="Button2" type="button" value="Button" name="Button1" onclick="LoadPage_2()">
<INPUT id="Button3" type="button" value="Button" name="Button1" onclick="LoadPage_3()">
</ul>
</div>
<div id="tabPanels" onmouseover="this.style.cursor='hand'"><FONT face="宋体"></FONT></div>
</div>
</body>
</html>
