WEB前端组件思想【分页】
DEMO1:
很早就想写一些功能性的组件，无奈技术有限一点一点的边工作，边学。
近日工作中用到分页功能，当然由于加快业务进度，第一选择肯定是选择插件，但是实用性来说，还是有那么一点不适合。毕竟插件是通用的。
经过几日加班后回家再熬夜学习。稍有收获。
从最简单的写起：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 a{ 8 margin: 6px; 9 } 10 </style> 11 <script type="text/javascript"> 12 //接之前的逻辑判断 如果 nownum 1了怎么办 变2了 最前也变成 -1 0 13 //必须再加判断 14 15 window.onload = function() 16 { 17 page({ 18 id:"div1", 19 nowNum:5, 20 allNum:10, 21 callback:function(now,all){ 22 alert("当前页"+now+"总共页"+all) 23 } 24 }) 25 function page(opt) 26 { 27 if(!opt.id){ 28 return false; 29 } 30 var obj = document.getElementById(opt.id); 31 var nowNum = opt.nowNum || 1; 32 var allNum = opt.allNum ||5; 33 //必须判断回调是否存在； 34 var callback= opt.callback || function(){}; 35 //写首页 上一页 大于6才能从中间开始向2边扩散 36 if (nowNum >4 && allNum >=6) { 37 var oA = document.createElement("a"); 38 oA.href = "#"+1; 39 oA.innerHTML= "首页"; 40 obj.appendChild(oA); 41 } 42 //上一页 大于等于2 43 if (nowNum >=2 ) { 44 var oA = document.createElement("a"); 45 oA.href = "#"+(nowNum-1); 46 oA.innerHTML= "上一页"; 47 obj.appendChild(oA); 48 } 49 50 51 if ( allNum<=5) { 52 for (var i=1;i<=allNum;i++) { 53 var oA = document.createElement("a"); 54 oA.href = "#"+i; 55 if (nowNum == i) { 56 oA.innerHTML = i; 57 }else{ 58 oA.innerHTML = "["+i+"]"; 59 } 60 obj.appendChild(oA); 61 } 62 63 }else{ 64 for (var i=1;i<=5;i++) { 65 var oA = document.createElement("a"); 66 if(nowNum == 1 || nowNum == 2) 67 { 68 oA.href = "#"+i; 69 if(nowNum == i){ 70 oA.innerHTML = i; 71 }else{ 72 oA.innerHTML = "["+i+"]"; 73 } 74 obj.appendChild(oA); 75 } //判断最后2页的值 找准规律 6 7 8 9 10 76 else if((allNum - nowNum) ==0 || (allNum - nowNum) ==1){ 77 oA.href = "#"+ (allNum-5+i); 78 //重点分析 判断 最后2项 9的时候 10的时候 79 if((allNum - nowNum) ==0 && i ==5 ){ 80 oA.innerHTML = (allNum -5 +i); 81 }else if((allNum - nowNum) ==1 && i ==4){ 82 oA.innerHTML = (allNum -5 +i); 83 } 84 else{ 85 oA.innerHTML = "["+(allNum-5+i)+"]"; 86 } 87 obj.appendChild(oA); 88 89 } 90 else{ 91 oA.href = "#"+ (nowNum-3 + i); 92 if (nowNum == (nowNum-3 + i)) { 93 oA.innerHTML = (nowNum-3 + i); 94 }else{ 95 oA.innerHTML = "["+(nowNum-3 + i)+"]"; 96 } 97 } 98 obj.appendChild(oA); 99 100 } 101 } 102 // 下一页 103 if ((allNum-nowNum)>=1) { 104 var oA = document.createElement("a"); 105 oA.href = "#"+(nowNum+1); 106 oA.innerHTML= "下一页"; 107 obj.appendChild(oA); 108 } 109 //尾页 为什么要大于6 如果只有5张就没必要 110 if ((allNum-nowNum)>=3 && allNum >=6) { 111 var oA = document.createElement("a"); 112 oA.href = "#"+ allNum; 113 oA.innerHTML= "尾页"; 114 obj.appendChild(oA); 115 } 116 callback(nowNum,allNum); 117 var aA = document.getElementsByTagName("a"); 118 for (var i=0; i<aA.length;i++) { 119 aA[i].onclick=function(){ 120 //alert(this.getAttribute("href").substring(1)); 121 var nowNum = parseInt(this.getAttribute("href").substring(1)); 122 obj.innerHTML=""; //清空整个之后重新生成 123 page({ 124 id:opt.id, 125 nowNum:nowNum, 126 allNum:allNum, 127 callback:callback 128 }) 129 //阻止默认事件 130 return false; 131 } 132 } 133 134 } 135 } 136 </script> 137 </head> 138 <body> 139 <div id="div1"></div> 140 </body> 141 </html>
稍微再加点料：
