這一款是用原生javascript實(shí)現(xiàn)的分頁(yè)插件pagenav,頁(yè)碼顯示jquery插件,只需要存在#pageNav,則會(huì)在其中顯示頁(yè)碼,調(diào)用時(shí)可根據(jù)需要先重寫go方法.(已去除jquery依賴)。。。。
插件代碼如下:
/* ************************** author:Keel ([email protected]) ************************** 頁(yè)碼顯示jquery插件,只需要存在#pageNav,則會(huì)在其中顯示頁(yè)碼. 調(diào)用時(shí)可根據(jù)需要先重寫go方法.(已去除jquery依賴) ************************** 示例(注意:頁(yè)面中放置id為pageNav的html對(duì)象): //轉(zhuǎn)到頁(yè)碼時(shí)觸發(fā)的自定義方法,p為當(dāng)前頁(yè)碼,pn為總頁(yè)數(shù) pageNav.fn = function(p,pn){ alert(p+","+pn); }; //初始跳到第3頁(yè),共33頁(yè) pageNav.go(3,33); */var pageNav = pageNav || {};pageNav.fn = null;//p為當(dāng)前頁(yè)碼,pn為總頁(yè)數(shù)pageNav.nav = function(p, pn) { //只有一頁(yè),直接顯示1 if (pn <= 1) { this.p = 1; this.pn = 1; return this.pHtml2(1); } if (pn < p) { p = pn; }; var re = ""; //第一頁(yè) if (p <= 1) { p = 1; } else { //非第一頁(yè) re += this.pHtml(p - 1, pn, "上一頁(yè)"); //總是顯示第一頁(yè)頁(yè)碼 re += this.pHtml(1, pn, "1"); } //校正頁(yè)碼 this.p = p; this.pn = pn; //開始頁(yè)碼 var start = 2; var end = (pn < 9) ? pn: 9; //是否顯示前置省略號(hào),即大于10的開始頁(yè)碼 if (p >= 7) { re += "..."; start = p - 4; var e = p + 4; end = (pn < e) ? pn: e; } for (var i = start; i < p; i++) { re += this.pHtml(i, pn); }; re += this.pHtml2(p); for (var i = p + 1; i <= end; i++) { re += this.pHtml(i, pn); }; if (end < pn) { re += "..."; //顯示最后一頁(yè)頁(yè)碼,如不需要?jiǎng)t去掉下面這一句 re += this.pHtml(pn, pn); }; if (p < pn) { re += this.pHtml(p + 1, pn, "下一頁(yè)"); }; return re;};//顯示非當(dāng)前頁(yè)pageNav.pHtml = function(pageNo, pn, showPageNo) { showPageNo = showPageNo || pageNo; var H = " <a href='javascript:pageNav.go(" + pageNo + "," + pn + ");' class='pageNum'>" + showPageNo + "</a> "; return H;};//顯示當(dāng)前頁(yè)pageNav.pHtml2 = function(pageNo) { var H = " <span class='cPageNum'>" + pageNo + "</span> "; return H;};//輸出頁(yè)碼,可根據(jù)需要重寫此方法pageNav.go = function(p, pn) { //$("#pageNav").html(this.nav(p,pn)); //如果使用jQuery可用此句 document.getElementById("pageNav").innerHTML = this.nav(p, pn); if (this.fn != null) { this.fn(this.p, this.pn); };};
效果如下:
演示地址:http://demo.VeVB.COm/js/2014/pagenav/ 有需要的朋友自己扒代碼吧,很簡(jiǎn)單,我就不提供直接下載了
|
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注