JavaScript实现XP效果的Tab切换标签功能(附使用方法)

欢马劈雪

工程师 (已认证)

原创分享签约作者

发表于JS/jQuery代码

147

非常好用Tab切换效果，仿照XP风格设计
下载文件
下载全部资源文件和代码
压缩包内有以下文件：
tab-view.html = 主HTML文件，演示
tab-view-demo2.html = 带练个Tab切换的HTML演示页面
js/ajax.js = Ajax (Library from //twilightuniverse.com/projects/sack).
js/tab-view.js =程序用到的主要脚本文件
css/tab-view.css = 程序用到的主样式定义
externalfile.html = 被Ajax调用生成Tab内容的文件
images/* = 所有图片文件
程序配置
程序的调用非常简单，只需要把要显示的内容放到div内，然后调用脚本即可
如下演示:
[code]
<div id="dhtmlgoodies_tabView1">
<div class="dhtmlgoodies_aTab">
Content of tab 1
</div>
<div class="dhtmlgoodies_aTab">
Content of tab 2
</div>
<div class="dhtmlgoodies_aTab">
Content of tab 3
</div>
<div class="dhtmlgoodies_aTab">
Content of tab 4
</div>
</div>
<script type="text/javascript">
initTabs(Array('Menu scripts','Calender',
'Menus','About us'),1,500,400);
</script>
[/code]
<div id="dhtmlgoodies_tabView1"> 是所有Tab标签的总结点. 用<div class="dhtmlgoodies_aTab"> 来表示每一个Tab窗口，然后在这个div内输入Tab窗口的内容.
通过 initTabs() 函数来初始化脚本. 函数参数定义如下:
根Div的ID: dhtmlgoodies_tabView1
Array('Menu scripts','Calender','Menus','About us') = Tal标题组成的数组
1 = 当前活动的Tab(0 = 第一个Tab, 1 = 第二个Tab...)
500 = Tab面板的宽度
400 = Tab秒板的高度(如果希望内容自适应高度，输入空字符串,如"")
Array(false,true,true,true) = 按钮显示数组. 如果设置为True则显示关闭按钮，否则不显示
动态创建Tab
通过函数 createNewTab() 添加一个新的Tab 函数参数定义如下:
Tab title = Tab的标题
Content = Tab的内容
Url to content = 从URL调用内容. Tab的内容将通过Ajax动态从Url调入
删除Tab
通过deleteTab(tab的标题)函数删除Tab. 参数为Tab的标题，如: deleteTab('Menu scripts');
动态添加内容到Tab
可以通过函数 addAjaxContentToTab 动态添加URL的内容到Tab.函数有两个参数:
Tab的标题, 如: "Menu scripts"
外部调用文件的URL, 如: "includes/external.inc"
范例:
[code]
<a href="#" onclick="addAjaxContentToTab('Menu scripts','includes/external.inc');return false">Add content<A>
[/code]
次范例必须严格遵守w3c标准，必须在html页面顶部加添加一下代码，Example:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
[/code]
如果你的文档里没有添加上面这行代码，你需要把strictDocType 变量的值从true改为false
[code]
var strictDocType = false;
[/code]