原生javascript實(shí)現(xiàn)的分頁插件pagenav
這一款是用原生javascript實(shí)現(xiàn)的分頁插件pagenav,頁碼顯示jquery插件,只需要存在#pageNav,則會(huì)在其中顯示頁碼,調(diào)用時(shí)可根據(jù)需要先重寫go方法.(已去除jquery依賴)。。。。
插件代碼如下:
/* ************************** author:Keel (keel.sike@gmail.com) ************************** 頁碼顯示jquery插件,只需要存在#pageNav,則會(huì)在其中顯示頁碼. 調(diào)用時(shí)可根據(jù)需要先重寫go方法.(已去除jquery依賴) ************************** 示例(注意:頁面中放置id為pageNav的html對(duì)象): //轉(zhuǎn)到頁碼時(shí)觸發(fā)的自定義方法,p為當(dāng)前頁碼,pn為總頁數(shù) pageNav.fn = function(p,pn){ alert(p+","+pn); }; //初始跳到第3頁,共33頁 pageNav.go(3,33); */ var pageNav = pageNav || {}; pageNav.fn = null; //p為當(dāng)前頁碼,pn為總頁數(shù) pageNav.nav = function(p, pn) { //只有一頁,直接顯示1 if (pn <= 1) { this.p = 1; this.pn = 1; return this.pHtml2(1); } if (pn < p) { p = pn; }; var re = ""; //第一頁 if (p <= 1) { p = 1; } else { //非第一頁 re += this.pHtml(p - 1, pn, "上一頁"); //總是顯示第一頁頁碼 re += this.pHtml(1, pn, "1"); } //校正頁碼 this.p = p; this.pn = pn; //開始頁碼 var start = 2; var end = (pn < 9) ? pn: 9; //是否顯示前置省略號(hào),即大于10的開始頁碼 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 += "..."; //顯示最后一頁頁碼,如不需要?jiǎng)t去掉下面這一句 re += this.pHtml(pn, pn); }; if (p < pn) { re += this.pHtml(p + 1, pn, "下一頁"); }; return re; }; //顯示非當(dāng)前頁 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)前頁 pageNav.pHtml2 = function(pageNo) { var H = " <span class='cPageNum'>" + pageNo + "</span> "; return H; }; //輸出頁碼,可根據(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.jb51.net/js/2014/pagenav/ 有需要的朋友自己扒代碼吧,很簡單,我就不提供直接下載了
- JS實(shí)現(xiàn)的自定義水平滾動(dòng)字體插件完整實(shí)例
- JS簡單實(shí)現(xiàn)文件上傳實(shí)例代碼(無需插件)
- js實(shí)現(xiàn)彈窗插件功能實(shí)例代碼分享
- JS實(shí)現(xiàn)的通用表單驗(yàn)證插件完整實(shí)例
- JS簡單實(shí)現(xiàn)城市二級(jí)聯(lián)動(dòng)選擇插件的方法
- js插件YprogressBar實(shí)現(xiàn)漂亮的進(jìn)度條效果
- js自定義select下拉框美化特效
- js中自定義方法實(shí)現(xiàn)停留幾秒sleep
- JS 自定義帶默認(rèn)值的函數(shù)
- 用js實(shí)現(xiàn)的自定義的對(duì)話框的實(shí)現(xiàn)代碼
- js 自定義的聯(lián)動(dòng)下拉框
- JS實(shí)現(xiàn)的自定義顯示加載等待圖片插件(loading.gif)
相關(guān)文章
JQuery 1.6發(fā)布 性能提升,同時(shí)包含大量破壞性變更
JQuery 1.6剛剛發(fā)布了,有幾處性能和跨瀏覽器兼容性的改進(jìn),專門重寫了屬性模塊2011-05-05jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能有截圖
本節(jié)主要介紹了jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能,經(jīng)測試效果相當(dāng)不錯(cuò),有圖有真相,喜歡的朋友可以參考下2014-09-09基于Jquery的動(dòng)態(tài)添加控件并取值的實(shí)現(xiàn)代碼
基于Jquery的動(dòng)態(tài)添加控件并取值的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-09-09jquery ajax分頁插件的簡單實(shí)現(xiàn)
這篇文章主要介紹了jquery ajax分頁插件的簡單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-01-01jquery提示 "object expected"的解決方法
在測試代碼的時(shí)候,提示object expected,下面的解決方法,可以參考下。2009-12-12