页码栏_Demo
功能介绍：
通过鼠标点击页码或指示，实现页码的跳转。
功能由一个page()函数实现，函数内部含有5个功能函数，分别实现不同的功能。
appendSpan(val)实现创建并添加span节点，主要通过该功能函数实现指示的生成；
insertSpan(val)实现创建并插入span节点...
功能介绍：
通过鼠标点击页码或指示，实现页码的跳转。
效果预览：
功能由一个page()函数实现，函数内部含有5个功能函数，分别实现不同的功能。
appendSpan(val)实现创建并添加span节点，主要通过该功能函数实现指示的生成；
insertSpan(val)实现创建并插入span节点，主要通过该功能函数实现页码的生成并插入到指示标签的中间；
changePage(clickPage)实现页码改变后，节点及视觉上产生的一系列变化，内部的reload(clickPage)函数实现页码数字的变更；
action(event)为事件处理程序，内部调用changePage()；
changeState()主要根据情况动态设置指示与页码的表现层CSS与行为层onclick。
html:
View Code
1 <div id="page"></div>
css:
View Code
1 #page span.disable{
2 color:#999;
3 cursor:default;
4 }
5 #page span.current{
6 color:red;
7 cursor:default;
8 }
9 #page span{
10 color:black;
11 padding:10px;
12 cursor:pointer;
13 }
js:
View Code
1 function page(element,max,count){
2 if(count==0) return;
3 var MAX=(count<max)?count:max,COUNT=count,
4 currentSpan,
5 currentPage,
6 aSpan=[],
7 firstPage,
8 nextPage,
9 prevPage,
10 lastPage,
11 dom=(typeof element=="string")?document.getElementById(element):element;
12 //添加指示
13 firstPage=appendSpan("<<");
14 prevPage=appendSpan("<");
15 nextPage=appendSpan(">");
16 lastPage=appendSpan(">>");
17 //添加页码
18 for(var i=0;i<MAX;i++){
19 var tem=insertSpan(i+1);
20 tem.page=i+1;
21 aSpan.push(tem);
22 }
23 //设置信息
24 currentSpan=0;
25 currentPage=1;
26 //设置状态
27 changeState();
28
29 function appendSpan(val){
30 var tem=document.createElement("span");
31 tem.innerHTML=val;
32 dom.appendChild(tem);
33 return tem;
34 }
35 function insertSpan(val){
36 var tem=document.createElement("span");
37 tem.innerHTML=val;
38 dom.insertBefore(tem,nextPage);
39 return tem;
40 }
41 function changePage(clickPage){
42 var iPage=clickPage-currentPage;
43 if(currentSpan+iPage>=MAX-1||currentSpan+iPage<=0){
44 currentSpan=reload(clickPage);
45 }
46 else{
47 currentSpan=currentSpan+iPage;
48 }
49 currentPage=clickPage;
50 changeState();
51 function reload(clickPage){
52 var iStart,currentSpan;
53 if(clickPage<Math.floor(MAX/2)+1){
54 iStart=1;
55 }
56 else if(clickPage>COUNT-Math.floor(MAX/2)){
57 iStart=COUNT-MAX+1;
58 }
59 else{
60 iStart=clickPage-Math.floor(MAX/2);
61 }
62 for(var i=0;i<MAX;i++)
63 {
64 aSpan[i].page=iStart+i;
65 aSpan[i].innerHTML=iStart+i;
66 if(iStart+i==clickPage) currentSpan=i;
67 }
68 return currentSpan;
69 }
70 }
71
72 function action(event){
73 event=event||window.event;
74 var target=event.target||event.srcElement;
75 changePage(target.page);
76 }
77
78 function changeState(){
79 //设置指示状态
80 if(currentPage===1){
81 setCSS(firstPage,"disable");
82 setCSS(prevPage,"disable");
83 setAction(firstPage,null);
84 setAction(prevPage,null);
85 }
86 else{
87 setCSS(firstPage,null);
88 setCSS(prevPage,null);
89 setAction(firstPage,function(){changePage(1);});
90 setAction(prevPage,function(){changePage(currentPage-1);});
91 }
92 if(currentPage===COUNT){
93 setCSS(nextPage,"disable");
94 setCSS(lastPage,"disable");
95 setAction(nextPage,null);
96 setAction(lastPage,null);
97 }
98 else{
99 setCSS(nextPage,null);
100 setCSS(lastPage,null);
101 setAction(nextPage,function(){changePage(currentPage+1);});
102 setAction(lastPage,function(){changePage(COUNT);});
103 }
104 //设置页码状态
105 for(var i=0;i<MAX;i++){
106 if(currentSpan===i){
107 setAction(aSpan[i],null);
108 setCSS(aSpan[i],"current");
109 }
110 else{
111 setCSS(aSpan[i],null);
112 setAction(aSpan[i],action);
113 }
114 }
115 function setCSS(element,css){
116 element.className=css;
117 }
118 function setAction(element,action){
119 element.onclick=action;
120 }
121 }
122 }
123 page("page",5,10);
