首页 > 网络编程 > JavaScript > 网页特效 > 导航菜单 > 自动切换的选项卡Tab

javascript 定时自动切换的选项卡Tab

2009-10-18 00:27:02 作者：

JavaScript配合CSS制作一个能自动切换的网页选项卡,每隔一段时间,它就自动切换选项卡列表和标题,时间自设.

这里要注意,用于产生changeTabInterval的随机数，防止页面上TabPane过多，如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果，不美观.

<title>自动切换Tab选项卡</title> 
<script type="text/javascript"> 
function randint(m,n)//产生m-n之间的随机整数 
{ 
    return Math.random()*(n-m)+m; 
} 
function IfNull(a,dv) 
{ 
    return typeof(a) =="undefined"?dv:a; 
}

var TabPaneConfig = { 
idPrefix: "tab-panel-object-", 
idCounter: 0, 
getId: function(){ return this.idPrefix+this.idCounter++;}, 
tabHeadId: "tabHead", 
tabHeadClass: "tab-head tab-border", 
tabBodyId: "tabBody", 
tabBodyClass: "tab-border" 
}

function TabPane(id,changeTabInterval,isAutoChangeTab){ 
this.id = id; 
this.height = "100%"; 
this.width = "100%";

this.tabPages = 0; 
this.head = null; 
this.body = null;

this.changeTabInterval=IfNull(changeTabInterval,10); 
this.isAutoChangeTab=IfNull(isAutoChangeTab,true); 
this.changeTabTimerId = null; 
}

TabPane.prototype.init = function(){ 
var r = document.getElementById(this.id); 
if(!r.style.overflow) r.style.overflow = "auto"; 
r.className = "tab";

//create head 
var div = document.createElement("div"); 
div.id = TabPaneConfig.tabHeadId; 
div.className = TabPaneConfig.tabHeadClass;

r.appendChild(div); 
this.head = div;

var ul = document.createElement("ul"); 
div.appendChild(ul);

//create body 
div = document.createElement("div"); 
div.id = TabPaneConfig.tabBodyId; 
div.className = TabPaneConfig.tabBodyClass;

r.appendChild(div); 
this.body = div;

if(this.isAutoChangeTab) 
{ 
     var tabPane = this; 
     this.changeTabTimerId = setInterval(function(){onChangeTabTimer(tabPane);},this.changeTabInterval*1000); 
} 
}

TabPane.prototype.stopChangeTabTimer = function () 
{ 
    if(this.isAutoChangeTab) 
{ 
clearInterval(this.changeTabTimerId); 
} 
}

TabPane.prototype.addTabPage = function(obj) 
{ 
if(!document.getElementById(obj.panel)) return; 
if(!this.tabPages) this.init();

this.head.firstChild.appendChild(this.createTabTitle(obj)); 
this.body.appendChild(document.getElementById(obj.panel)); 
this.tabPages++; 
}

TabPane.prototype.createTabTitle = function(obj){ 
var li = document.createElement("li"); 
li.id = TabPaneConfig.getId(); 
li.data = obj.panel; 
var tabPane = this; 
li.onclick=function(){tabOnClick(tabPane,li)}; 
li.style.width = obj.width;

if(this.tabPages) 
{ 
li.className=""; 
document.getElementById(obj.panel).style.display="none"; 
} 
else 
{ 
li.className="hover"; 
document.getElementById(obj.panel).style.display="block"; 
}

var textNode = document.createTextNode(obj.title); 
li.appendChild(textNode); 
return li; 
}

//得到所有Tab页的Li元素 
TabPane.prototype.getLiArr = function() 
{ 
    return this.head.firstChild.children; 
}

TabPane.prototype.getAcitveLi = function() 
{ 
    var liArr = this.getLiArr(); 
for(var i=0; i<liArr.length; i++) 
{ 
    if(liArr[i].className=="hover") 
    { 
        return liArr[i]; 
    } 
}     
}

//切换到指定的li对应的Tab页 
TabPane.prototype.changeToTab = function (li) 
{ 
var liArr = this.getLiArr(); 
for(var i=0; i<liArr.length; i++) 
{ 
liArr[i].className=""; 
document.getElementById(liArr[i].data).style.display="none"; 
} 
li.className="hover"; 
document.getElementById(li.data).style.display="block";     
}

//得到v在数组arr中的序号 
function indexOf(arr,v) 
{ 
    for(var i = arr.length; i-- && arr[i] !== v;); 
    return i;      
}

function onChangeTabTimer(tabPane) 
{ 
var liArr = tabPane.getLiArr(); 
var activeLi = tabPane.getAcitveLi(); 
var i = indexOf(liArr,activeLi); 
var nexti = (i+1+liArr.length)%liArr.length; 
var nextLi = liArr[nexti]; 
tabPane.changeToTab(nextLi); 
}

function tabOnClick(tabPane,li) 
{ 
     tabPane.stopChangeTabTimer(); 
        tabPane.changeToTab(li); 
}

</script> 
<style> 
.tab { 
font-family: Verdana, Helvetica, Arial; 
font-size: 12px; 
position: relative; 
width: 100%; 
} 
.tab-border {border:1px solid;border-color: rgb(120,172,255);} 
.tab-head { 
background-color:rgb(234,242,255);; 
border:0px; 
height:23px; 
line-height:20px; 
position:relative; 
} 
.tab-head ul{ 
border:0px; 
height:23px; 
list-style:none; 
margin:0px; 
text-align:center; 
padding:0; 
position:absolute;

} 
.tab-head li{ 
border: 1px solid; 
border-color: rgb(120,172,255); 
border-left: 0; 
border-bottom: 0; 
border-top: 0; 
cursor:pointer; 
color:#416AA3; 
float:left; 
display:block; 
height:22px;!important;height:20px; 
line-height:20px; 
padding: 2px 6px 0px 6px; 
margin-top: 2px; 
margin-right: -1px; 
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

} 
.tab-head li.hover{ 
border: 1px solid rgb(120,172,255); 
border-bottom: 0; 
padding: 0px 6px 3px 6px; 
margin: 0px 1px 0px 0px; 
background: white; 
font-size: 13px; 
font-weight: bold; 
color: rgb(0,66,174); 
overflow:visible; 
} 
</style> 
<div id="rptopmain_right_middle_right"> 
             
                    <div id="divForumBoard"></div>                         
                    <div id="divForumCast" style="padding:8px;height:200px"> 
<DIV class=rp_2equalcol><A href="#" target=_blank>黑客零起点教程 CHM</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>什么样的项目经历会让面试官眼前一亮</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>编程学习中的一些错误认识</A></DIV> 
                    </div>                         
            <div id="divForumPanel" style="padding:8px;height:210px">                                 
<DIV class=rp_2equalcol><A href="#" target=_blank>Delphi多文档几何图形绘制及编辑程序</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>学ACM算法题有用吗？</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>黑客零起点教程 CHM</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>B实现主窗体控制副窗口的显示与隐藏</A></DIV> 
<DIV class=rp_2equalcol><A href="#" target=_blank>Delphi多文档几何图形绘制及编辑程序</A></DIV>                 
            </div>                          
                    <script> 
                 var tp = new TabPane("divForumBoard",randint(3,10)); 
                 tp.addTabPage({title:"公告" ,width:50 ,panel:"divForumCast"}); 
                 tp.addTabPage({title:"面板" ,width:50 ,panel:"divForumPanel"}); 
                    </script>              
             </div> 
        </div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 定时自动切换的选项卡Tab

您可能感兴趣的文章: