JavaScript实现XP效果的Tab切换标签功能(附使用方法) |
2021-01-21 23:00:50 35资源网(www.35d.net) |
js |
下载本资源原文网址:http://www.daima.org/js/js17203.html 非常好用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] |
|
|
|
资源大全_资源下载网站:www.35d.net 本站资源仅限研究学习使用,如需商用请联系版权方, 本站事务联系QQ:939804642
|
|