内容函数文件免费素材下载 JavaScript完成XP成果的Tab切换标签性能(附应用办法)

资源魔 121 0
十分好用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]

标签: 标签 tab切换 工作场景

抱歉,评论功能暂时关闭!