定時自動切換的選項卡Tab

2024-09-05 12:20:28

字體：大中小

來源：轉載

供稿：網友

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);    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   class="1116116"   id="rptopmain_right_middle_right">								<div   class="6116666"   id="divForumBoard"></div>						 					<div   class="1661111"   id="divForumCast" style="padding:8px;height:200px">        <div   id="6166111"   class=rp_2equalcol>黑客零起點教程 CHM</DIV><div   id="1666161"   class=rp_2equalcol>可以加密及解密的VB屏幕鍵盤組件</DIV><div   id="6616116"   class=rp_2equalcol>什么樣的項目經歷會讓面試官眼前一亮</DIV><div   id="1166116"   class=rp_2equalcol>超級j2me飛行游戲瘋狂雷電源代碼</DIV><div   id="6611111"   class=rp_2equalcol>可以加密及解密的VB屏幕鍵盤組件</DIV><div   id="1166611"   class=rp_2equalcol>編程學習中的一些錯誤認識</DIV>					</div>									<div   class="1666166"   id="divForumPanel" style="padding:8px;height:210px">								<div   id="1166166"   class=rp_2equalcol>Delphi多文檔幾何圖形繪制及編輯程序</DIV><div   id="1166611"   class=rp_2equalcol>學ACM算法題有用嗎？</DIV><div   id="6666616"   class=rp_2equalcol>黑客零起點教程 CHM</DIV><div   id="6611111"   class=rp_2equalcol>超級j2me飛行游戲瘋狂雷電源代碼</DIV><div   id="1616166"   class=rp_2equalcol>B實現主窗體控制副窗口的顯示與隱藏</DIV><div   id="6166161"   class=rp_2equalcol>Delphi多文檔幾何圖形繪制及編輯程序</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>

上一篇：CSS實現折疊的菜單

下一篇：滑動菜單，Tab，選項卡，橫向，豎向都有