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:
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.
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:
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
