页码栏_Demo

功能介绍：

通过鼠标点击页码或指示，实现页码的跳转。

效果预览：

功能由一个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( " &lt;&lt " );
14 prevPage = appendSpan( " &lt " );
15 nextPage = appendSpan( " &gt " );
16 lastPage = appendSpan( " &gt;&gt " );
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 );

转载于:https://www.cnblogs.com/littleG/archive/2011/05/08/2040238.html