一个带分页功能的Tab

var tabObject={};
var imgHead;
//第一个框架
var imgArry;
//中间多个，以数组形式[].
var imgFoot;
//最后一个框架
var LastID;
var ActiveBar=null;

function TabClass(DataSource,Type)
{       
    this.DataSource=DataSource;   
   
    this.pageIndex=1;   
    this.pageSize=8;   
    this.BarHeight=20;   
    this.BarWidth=90;   
    this.BarAlign="center";   
    var Tb=document.createElement("Table");   
    Tb.id="tb_Bar";   
    Tb.cellSpacing=0;   
    Tb.cellPadding=0;
   
    Tb.width="100%";   
    Tb.border=0;   
    this.trBar=Tb.insertRow();   
    this.tbBar=Tb;   
    document.Form1.appendChild(Tb);   
    var TbShow=document.createElement("Table");   
    TbShow.id="Tb_0";   
    TbShow.cellSpacing=0;   
    TbShow.cellPadding=0;   
    TbShow.width="100%";   
    TbShow.height="480px";   
    TbShow.border=0;   
    var nTR=TbShow.insertRow();   
    var nTD=nTR.insertCell();   
    nTD.algin="center";   
    nTD.height="100%";   
    nTD.className="show-table Tab-content";   
    var nType=Type.toUpperCase();   
    switch(nType)
   
    {
       
        case "IMG":
        {
           
            nTD.innerHTML="<IMG id='Img_Show' border='0'>";
           
        }
        break;       
        case "IFRAME":
        {
           
            nTD.innerHTML="<iframe id='Img_Show' frameborder='0' height='100%' width='100%' onload='hidWait()'>";           
           
        }
        break;       
       
    }
    document.Form1.appendChild(TbShow);   
    this.imgControl=document.getElementById("Img_Show");   
   
}
function hidWait()
{
    document.getElementById("div_Wait").style.display="none";
   
}
TabClass.prototype=
{
   
    init:function ()
    {
       
        this.pageCount=Math.round(this.DataSource.length/this.pageSize);       
        if(((this.DataSource.length%this.pageSize)/this.pageSize)<0.5&&((this.DataSource.length%this.pageSize)/this.pageSize)>0)
       
        {
           
            this.pageCount++;           
           
        }
        this.showCell(false);       
        this.pageShow=this.getObj("lab_CurrentPage");       
       
    },
    showCell:function (autoFlag)
    {
       
        var intStart=(this.pageIndex-1)*this.pageSize;       
        var initSize=this.pageIndex*this.pageSize;       
        var newCell=null;       
        var FirstBar=this.trBar.insertCell();       
        this.setSwing(FirstBar,imgHead[0],imgHead[1]);       
        FirstBar.imgSrc=imgHead[2];       
        this.setStyle(FirstBar,true,true);       
        for(i=intStart;i<initSize;i++)
       
        {
           
            if(this.DataSource[i])
           
            {
               
                newCell=this.trBar.insertCell();               
                newCell.imgSrc=this.DataSource[i][2];               
                this.setSwing(newCell,this.DataSource[i][0],this.DataSource[i][1]);               
                this.setStyle(newCell,true,false);               
               
            }
           
           
        }
        if(autoFlag)
       
        {
           
            this.setActiveAuto(this.tbBar.firstChild.firstChild.firstChild.nextSibling);           
           
        }
        if(imgFoot.length!=0)
       
        {
           
            var BigBottonBar=this.trBar.insertCell();           
            this.setSwing(BigBottonBar,imgFoot[0],imgFoot[1]);           
            BigBottonBar.imgSrc=imgFoot[2];           
            this.setStyle(BigBottonBar,true);           
           
        }
        var _jg=this.trBar.insertCell();       
        _jg.innerHTML="&nbsp;&nbsp;";       
        _jg.className="Tab-none";       
        _jg.align="right";       
        if(this.pageCount>1)
       
        {
           
            this.currentPage=1;           
            var LastBar=this.trBar.insertCell();           
            LastBar.innerHTML="&nbsp;&nbsp;Total:"+this.DataSource.length+"&nbsp;&nbsp;<label id='lab_CurrentPage' style='FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #ff0033'>"+this.pageIndex+"</label>|<label id='lab_PageCount' style='FONT-WEIGHT: bold; FONT-SIZE: 9pt;'>"+this.pageCount+"</label>&nbsp;&nbsp;&nbsp;&nbsp;<img border=0 alt='prev' src='images/prev.gif' onclick='javascript:tabObject.prev()'>&nbsp;&nbsp;<img border=0 src='images/next.gif' onclick='javascript:tabObject.next()' alt='next'>";           
            LastBar.className="Tab-none";           
            LastBar.align="right";           
           
        }
       
    },
    prev:function ()
    {
       
        if(this.pageIndex!=1)
       
        {
           
            this.clear();           
            this.pageIndex--;           
            this.showCell(true);           
           
        }
       
    },
    next:function ()
    {
       
        if(this.pageIndex<this.pageCount)
       
        {
           
            this.clear();           
            this.pageIndex++;           
            this.showCell(true);           
           
        }
       
    },
    changeCurrPageIndex:function ()
   
    {
       
        this.pageShow.innerText=this.pageIndex;       
       
    },
    clear:function ()
    {
       
        while(this.tbBar.cells.length>0)
       
        {
           
            this.tbBar.cells[0].parentElement.removeChild(this.tbBar.cells[0]);           
           
        }
       
    },
    setStyle:function (_htmlObj,_flag,_on)
   
    {
       
       
        if(_flag)
       
        {
           
            _htmlObj.width=this.BarWidth;           
            _htmlObj.height=this.BarHeight;           
            _htmlObj.align=this.BarAlign;           
           
        }
        if(_on)
       
        {
           
            _htmlObj.className="Tab-on";           
            _htmlObj.setAttribute("active",true);           
            this.imgControl.src=_htmlObj.imgSrc;           
            ActiveBar=_htmlObj;           
           
        }
        else
       
        {
           
            _htmlObj.className="Tab-off";           
            _htmlObj.setAttribute("active",false);           
           
        }
       
       
    },
    setBarActive:function ()
   
    {
       
        var _htmlObj=event.srcElement;       
        if(!_htmlObj.active)
       
        {
           
            tabObject.setStyle(ActiveBar,false,false);           
            tabObject.setStyle(_htmlObj,false,true);           
            tabObject.imgControl.src=_htmlObj.imgSrc;           
            document.getElementById("div_Wait").style.display="block";           
           
        }
       
    },
    setActiveAuto:function (_htmlObj)
   
    {
       
        if(!_htmlObj.active)
       
        {
           
            tabObject.setStyle(ActiveBar,false,false);           
            tabObject.setStyle(_htmlObj,false,true);           
            tabObject.imgControl.src=_htmlObj.imgSrc;           
            document.getElementById("div_Wait").style.display="block";           
           
        }
       
    },
    setSwing:function (_Obj,_ID,_HTML)
   
    {
       
        _Obj.id=_ID;       
        _Obj.innerHTML=_HTML;       
        _Obj.attachEvent("onclick",this.setBarActive);
       
       
    },
    getObj:function (_ID)
   
    {
       
        return document.getElementById(_ID);       
       
    }
   
}