JavaScript实现XP效果的Tab切换标签功能

2008-12-29 08:44:53 | 【大中小】

非常好用Tab切换效果，仿照XP风格设计

下载文件
点击这里下载全部资源文件和代码

压缩包内有以下文件：

tab-view.html = 主HTML文件，演示
tab-view-demo2.html = 带练个Tab切换的HTML演示页面
js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack).
js/tab-view.js =程序用到的主要脚本文件
css/tab-view.css = 程序用到的主样式定义
externalfile.html = 被Ajax调用生成Tab内容的文件
images/* = 所有图片文件

程序配置
程序的调用非常简单，只需要把要显示的内容放到div内，然后调用脚本即可
如下演示:

<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>

<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"
范例:

<a href="#" onclick="addAjaxContentToTab('Menu scripts','includes/external.inc');return false">Add content<A>

次范例必须严格遵守w3c标准，必须在html页面顶部加添加一下代码，Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

如果你的文档里没有添加上面这行代码，你需要把strictDocType 变量的值从true改为false

var strictDocType = false;

下载"JavaScript实现XP效果的Tab切换标签功能"

推荐给朋友

上一篇： jQuery笔记
下一篇： JavaScript实现可自定义排序的表格

JavaScript实现XP效果的Tab切换标签功能

下载"JavaScript实现XP效果的Tab切换标签功能"

相关资源