前段时间写的一个带分页功能的Tab

Posted on 2007-05-10 18:08 supersun-mo 阅读(680) 评论(1) 收藏举报

前段时间由于工作需要，写了一个带分页功能的tab，希望对大家有用
效果如下：

var tabObject={};
2

var imgHead; //第一个框架
3

var imgArry; //中间多个，以数组形式[].
4

var imgFoot; //最后一个框架
5

var LastID;
6

var ActiveBar=null;
7

function TabClass(DataSource,Type){
8

this.DataSource=DataSource;
9

this.pageIndex=1;
10

this.pageSize=8;
11

this.BarHeight=20;
12

this.BarWidth=90;
13

this.BarAlign="center";
14

var Tb=document.createElement("Table");
15

Tb.id="tb_Bar";
16

Tb.cellSpacing=0;
17

Tb.cellPadding=0;
18

Tb.width="100%";
19

Tb.border=0;
20

this.trBar=Tb.insertRow();
21

this.tbBar=Tb;
22

document.Form1.appendChild(Tb);
23

var TbShow=document.createElement("Table");
24

TbShow.id="Tb_0";
25

TbShow.cellSpacing=0;
26

TbShow.cellPadding=0;
27

TbShow.width="100%";
28

TbShow.height="480px";
29

TbShow.border=0;
30

var nTR=TbShow.insertRow();
31

var nTD=nTR.insertCell();
32

nTD.algin="center";
33

nTD.height="100%";
34

nTD.className="show-table Tab-content";
35

var nType=Type.toUpperCase();
36

switch(nType)
37

{
38

case "IMG" :{
39

nTD.innerHTML="<IMG id='Img_Show' border='0'>";}
40

break;
41

case "IFRAME" :{
42

nTD.innerHTML="<iframe id='Img_Show' frameborder='0' height='100%' width='100%' onload='hidWait()'>";
43

}
44

break;
45

}
46

document.Form1.appendChild(TbShow);
47

this.imgControl=document.getElementById("Img_Show");
48

}
49

function hidWait(){document.getElementById("div_Wait").style.display="none";}
50

TabClass.prototype={
51

init:function(){
52

this.pageCount=Math.round(this.DataSource.length/this.pageSize);
53

if(((this.DataSource.length%this.pageSize)/this.pageSize)<0.5 && ((this.DataSource.length%this.pageSize)/this.pageSize)>0)
54

{
55

this.pageCount++;
56

}
57

this.showCell(false);
58

this.pageShow=this.getObj("lab_CurrentPage");
59

},
60

showCell:function(autoFlag){
61

var intStart=(this.pageIndex-1)*this.pageSize;
62

var initSize=this.pageIndex*this.pageSize;
63

var newCell = null;
64

var FirstBar=this.trBar.insertCell();
65

this.setSwing(FirstBar,imgHead[0],imgHead[1]);
66

FirstBar.imgSrc=imgHead[2];
67

this.setStyle(FirstBar,true,true);
68

for(i=intStart;i<initSize;i++)
69

{
70

if(this.DataSource[i])
71

{
72

newCell=this.trBar.insertCell();
73

newCell.imgSrc=this.DataSource[i][2];
74

this.setSwing(newCell,this.DataSource[i][0],this.DataSource[i][1]);
75

this.setStyle(newCell,true,false);
76

}
77

}
79

if(autoFlag)
80

{
81

this.setActiveAuto(this.tbBar.firstChild.firstChild.firstChild.nextSibling);
82

}
83

if(imgFoot.length!=0)
84

{
85

var BigBottonBar=this.trBar.insertCell();
86

this.setSwing(BigBottonBar,imgFoot[0],imgFoot[1]);
87

BigBottonBar.imgSrc=imgFoot[2];
88

this.setStyle(BigBottonBar,true);
89

}
90

var _jg=this.trBar.insertCell();
91

_jg.innerHTML="  ";
92

_jg.className="Tab-none";
93

_jg.align="right";
94

if(this.pageCount>1)
95

{
96

this.currentPage=1;
97

var LastBar=this.trBar.insertCell();
98

LastBar.innerHTML="  Total:"+this.DataSource.length+"  <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>    <img border=0 alt='prev' src='images/prev.gif' onclick='javascript:tabObject.prev()'>  <img border=0 src='images/next.gif' onclick='javascript:tabObject.next()' alt='next'>";
99

LastBar.className="Tab-none";
100

LastBar.align="right";
101

}
102

},
103

prev:function(){
104

if(this.pageIndex!=1)
105

{
106

this.clear();
107

this.pageIndex--;
108

this.showCell(true);
109

}
110

},
111

next:function(){
112

if(this.pageIndex<this.pageCount)
113

{
114

this.clear();
115

this.pageIndex++;
116

this.showCell(true);
117

}
118

},
119

changeCurrPageIndex:function()
120

{
121

this.pageShow.innerText=this.pageIndex;
122

},
123

clear:function(){
124

while(this.tbBar.cells.length>0)
125

{
126

this.tbBar.cells[0].parentElement.removeChild(this.tbBar.cells[0]);
127

}
128

},
129

setStyle:function(_htmlObj,_flag,_on)
130

{
131

132

if(_flag)
133

{
134

_htmlObj.width=this.BarWidth;
135

_htmlObj.height=this.BarHeight;
136

_htmlObj.align=this.BarAlign;
137

}
138

if(_on)
139

{
140

_htmlObj.className="Tab-on";
141

_htmlObj.setAttribute("active",true);
142

this.imgControl.src=_htmlObj.imgSrc;
143

ActiveBar=_htmlObj;
144

}
145

else
146

{
147

_htmlObj.className="Tab-off";
148

_htmlObj.setAttribute("active",false);
149

}
150

151

},
152

setBarActive:function()
153

{
154

var _htmlObj=event.srcElement;
155

if(!_htmlObj.active)
156

{
157

tabObject.setStyle(ActiveBar,false,false);
158

tabObject.setStyle(_htmlObj,false,true);
159

tabObject.imgControl.src=_htmlObj.imgSrc;
160

document.getElementById("div_Wait").style.display="block";
161

}
162

},
163

setActiveAuto:function(_htmlObj)
164

{
165

if(!_htmlObj.active)
166

{
167

tabObject.setStyle(ActiveBar,false,false);
168

tabObject.setStyle(_htmlObj,false,true);
169

tabObject.imgControl.src=_htmlObj.imgSrc;
170

document.getElementById("div_Wait").style.display="block";
171

}
172

},
173

setSwing:function(_Obj,_ID,_HTML)
174

{
175

_Obj.id=_ID;
176

_Obj.innerHTML=_HTML;
177

_Obj.attachEvent("onclick",this.setBarActive);
178

},
179

getObj:function(_ID)
180

{
181

return document.getElementById(_ID);
182

}
183

}
184

刷新页面返回顶部

SuperSun

导航

公告

前段时间写的一个带分页功能的Tab