您當前位置：首頁 > web前端 > jscript > javascript分頁類支持頁碼格式

javascript分頁類支持頁碼格式

來源：程序員人生發(fā)布時間：2013-12-11 17:30:09 閱讀次數(shù)：2681次

前端時間因為項目需要，要對一個產(chǎn)品下所有的附屬圖片進行分頁顯示，沒考慮ajax一張張請求，所以干脆一次性全部把圖片out，然后在載入的時候進行分頁，網(wǎng)上很多jquery,property等都實現(xiàn)了，但是他們插件的附屬功能很多又不需要，而且沒必要就為了這么一個功能區(qū)引用這個庫，為速度考慮吧，當然你服務(wù)器好也行，但是其實這個效果不是必須的，但是覺的會常用，所以就包裝成類了，供以后使用，也供有需要的人學(xué)習使用。

下面只是一個簡單的demo,用的話自己可以在編輯頁碼樣式，有默認的格式。不廢話了，自己看吧，有注釋使用說明。類（3kb)使用可以參照demo，不明白使用的可以留言。

以后會慢慢寫一些項目開發(fā)中常遇到的問題，以及解決方案，和大家學(xué)習分享。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>javascript分頁類支持頁碼格式-Liehuo.net</title><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><style type="text/css">body {text-align:center;padding:20px 0 0 0;font-size:14px;}a {color:#000;font-size:14px;cursor:pointer;}ul, li {margin:0;padding:0;list-style:none;}.contain {margin:0 auto;width:825px;text-align:left;border:1px #000 solid;padding:5px;height:auto;}li.sd a,li.sd a:link,li.sd a:visited{background-color:#000; color:#FFF; font-size:13px;}</style><title>Jpage Demo - by funnyzak</title><script type="text/javascript">/* "調(diào)用方式 var zp = new zakPage(參數(shù));zp.init();參數(shù)以此為源內(nèi)容容器，分頁結(jié)果容器，導(dǎo)航容器，頁大小,單挑內(nèi)容回調(diào)函數(shù)返回li對象,每個li的樣式,選擇后的樣式?jīng)]有則為null或""，默認起始頁數(shù),格式化頁碼顯示格式*/function zakPage(id,pagec,navid,pagesize,lievt,ds,ss,idx,navp){this.obj = this;this.pageid = id;this.pagec = pagec;this.navc = navid;this.pagesize = pagesize || 7;this.lievt = lievt || null;this.rcount = 0;this.pagecount = 0;this.cpage = 1;this.ds = ds;if(this.ds == null){this.ds = "";}this.ss = ss;if(this.ss == null){this.ss = "";}this.idx = idx;this.navpre = navp || ["共{$pcount}頁/{$rcount}條,當前第{cpage}頁","首頁","上一頁","下一頁","末頁"];}zakPage.prototype = {init:function(){document.getElementById(this.pageid).style.display = "none";this.rcount = document.getElementById(this.pageid).getElementsByTagName("li").length;var residue = this.rcount%this.pagesize;var nums = parseInt(this.rcount/this.pagesize);this.pagecount = nums;if(residue != 0){this.pagecount = nums+1;}this.gopage(this.idx);},guide:function(){var nav = document.getElementById(this.navc);var np = this.navpre;nav.innerHTML = np[0].replace("{$rcount}",this.rcount).replace("{$pcount}",this.pagecount).replace("{cpage}",this.cpage);nav.appendChild(this.createa(np[1],1));nav.appendChild(this.createa(np[2],this.cpage-1));nav.appendChild(this.createa(np[3],this.cpage+1));nav.appendChild(this.createa(np[4],this.pagecount));},createa:function(html,index){var aa = document.createElement("a");aa.innerHTML = html;var o = this.obj;aa.onclick = function(){o.gopage(index);}return aa;},gopage:function(index){if(index>this.pagecount){index=1;}if(index<=0){index = this.pagecount;}this.cpage = index;var ghtml = document.getElementById(this.pagec);ghtml.innerHTML = "";var pages = (index-1)*this.pagesize;var pagee = pages+this.pagesize;if(pagee>this.rcount){pagee = this.rcount;}for(var i=pages;i<pagee;i++){var lil = document.createElement("li");lil.className = this.ds;lil.innerHTML = this.litem(i);var sss = this.ss;if(this.lievt !=null){lil.lievt = this.lievt;lil.onclick = function(){this.lievt(this);this.className = sss;}}ghtml.appendChild(lil);}this.guide();},litem:function(index){return document.getElementById(this.pageid).getElementsByTagName("li")[index].innerHTML;}}</script></head><body><div class="contain"><ul id="jpage"><li>09日<a target="_blank" href="http://www.vxbq.cn/a/view/11372.html">BTchina遭關(guān)閉視頻“版權(quán)門”BT下載模式堪憂</a></li><li>09日<a target="_blank" href="http://www.vxbq.cn/a/view/11371.html">支付寶總裁邵曉峰裸奔慶祝業(yè)績提前達標</a></li><li>09日<a target="_blank" href="http://www.vxbq.cn/a/view/11369.html">吶喊：站長們一定要堅定地走下去！</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11366.html">王鈺鈞:讓百度每天更新收錄的成功經(jīng)驗</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11363.html">百度競價排名系統(tǒng)被指未完全＂下架＂</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11362.html">百度新筑鳳巢不良網(wǎng)站仍可購買搜索關(guān)鍵詞</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11361.html">為2010年考慮網(wǎng)站調(diào)整SEO戰(zhàn)略</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11360.html">要脫穎而出更要安全五個關(guān)鍵詞幫網(wǎng)店賣家建</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11339.html">無視聽許可BTChina關(guān)站澄清站長被拘傳言</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11336.html">內(nèi)部鏈接還是外部鏈接?</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11335.html">如何向Google資訊推薦和提交新聞網(wǎng)站內(nèi)容</a></li><li>07日<a target="_blank" href="http://www.vxbq.cn/a/view/11333.html">百度遭遇山寨版網(wǎng)站律師稱模仿者侵權(quán)</a></li><li>05日<a target="_blank" href="http://www.vxbq.cn/a/view/11326.html">對于央視曝光“百谷成”事件的看法</a></li><li>05日<a target="_blank" href="http://www.vxbq.cn/a/view/11320.html">新網(wǎng)DNS域名解析故障 Dnspod趁機漲價？</a></li><li>04日<a target="_blank" href="http://www.vxbq.cn/a/view/11319.html">我的淘寶網(wǎng)服裝站還能經(jīng)的起此次的風波嗎？</a></li><li>04日<a target="_blank" href="http://www.vxbq.cn/a/view/11318.html">站長如何去創(chuàng)造搜索源來推廣網(wǎng)站</a></li><li>04日<a target="_blank" href="http://www.vxbq.cn/a/view/11308.html">技術(shù)性站長應(yīng)該避免的10個毛病</a></li><li>04日<a target="_blank" href="http://www.vxbq.cn/a/view/11307.html">做站長的打死不能買新網(wǎng)域名</a></li><li>04日<a target="_blank" href="http://www.vxbq.cn/a/view/11306.html">“網(wǎng)站運營”簡言之就是制定有效的盈利模式</a></li><li>04日<a target="_blank" href="http://www.vxbq.cn/a/view/11303.html">安徽炎黃網(wǎng)絡(luò)被調(diào)查殃及上萬網(wǎng)站無法訪問</a></li><li>03日<a target="_blank" href="http://www.vxbq.cn/a/view/11298.html">別迷戀百度鳳巢鳳巢只是個傳說</a></li><li>03日<a target="_blank" href="http://www.vxbq.cn/a/view/11297.html">網(wǎng)站標簽優(yōu)化一小步排名一大步</a></li><li>03日<a target="_blank" href="http://www.vxbq.cn/a/view/11288.html">百度貼吧六周年慶啟用tieba.com新域名</a></li><li>03日<a target="_blank" href="http://www.vxbq.cn/a/view/11270.html">淺淡：關(guān)于最近IDC商的“痛”</a></li><li>03日<a target="_blank" href="http://www.vxbq.cn/a/view/11271.html">百度“鳳巢門”搞的草根站長人心惶惶</a></li><li>03日<a target="_blank" href="http://www.vxbq.cn/a/view/11272.html">情色六月網(wǎng)站傳播色情張方耀獲刑十一年</a></li><li>02日<a target="_blank" href="http://www.vxbq.cn/a/view/11266.html">PHPCMS 新版本發(fā)布在即未來發(fā)展空間更大</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11224.html">百度算法怎么更新都要以體驗度為尺度</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11217.html">“百度熊”的掌上戰(zhàn)略初見雛形</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11215.html">做網(wǎng)站去淘寶逛逛是很有必要的</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11214.html">網(wǎng)站快速建立索引的幾種技巧</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11213.html">作為草根站長我應(yīng)該何去何從</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11181.html">賽門鐵克發(fā)布100個最危險網(wǎng)站排行榜</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11175.html">英文站長需要知道的國外廣告聯(lián)盟</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11172.html">cPanel面板:快速上傳文件到空間的方法</a></li><li>01日<a target="_blank" href="http://www.vxbq.cn/a/view/11166.html">必應(yīng)2009年10大熱門搜索關(guān)鍵詞公布</a></li><li>30日<a target="_blank" href="http://www.vxbq.cn/a/view/11164.html">百度“我的個性化首頁”出現(xiàn)網(wǎng)頁錯誤</a></li><li>30日<a target="_blank" href="http://www.vxbq.cn/a/view/11162.html">從 Google PageRank 解讀SEO的誤區(qū)</a></li><li>30日<a target="_blank" href="http://www.vxbq.cn/a/view/11161.html">讓你的網(wǎng)頁更受搜索引擎重視</a></li><li>30日<a target="_blank" href="http://www.vxbq.cn/a/view/11137.html">網(wǎng)站多次改版總結(jié)出來的經(jīng)驗及教訓(xùn)</a></li><li>30日<a target="_blank" href="http://www.vxbq.cn/a/view/11134.html">新華社與阿里巴巴聯(lián)合打造雅虎新聞中心</a></li><li>30日<a target="_blank" href="http://www.vxbq.cn/a/view/11133.html">搜狐斥資7.5億在北京開發(fā)房地產(chǎn)項目</a></li><li>30日<a target="_blank" href="http://www.vxbq.cn/a/view/11132.html">利用 Feed2js 輕松將你的rss轉(zhuǎn)成JS</a></li><li>27日<a target="_blank" href="http://www.vxbq.cn/a/view/11067.html">維基百科創(chuàng)始人否認4.9萬編輯流失</a></li><li>27日<a target="_blank" href="http://www.vxbq.cn/a/view/11065.html">回答SEOWHY論壇會員菜鳥四則SEO小問</a></li><li>27日<a target="_blank" href="http://www.vxbq.cn/a/view/11064.html">一個企業(yè)要注冊多少域名才算好</a></li><li>27日<a target="_blank" href="http://www.vxbq.cn/a/view/11051.html">站長淺談:如何利用QQ、旺旺賺錢</a></li><li>27日<a target="_blank" href="http://www.vxbq.cn/a/view/11050.html">經(jīng)驗分享:關(guān)于alt標簽的應(yīng)用研究</a></li><li>27日<a target="_blank" href="http://www.vxbq.cn/a/view/11045.html">西聯(lián)匯款的現(xiàn)匯、現(xiàn)鈔買入價與基準價問題</a></li><li>26日<a target="_blank" href="http://www.vxbq.cn/a/view/11035.html">幫助谷歌收錄你的手機網(wǎng)站</a></li></ul><ul id="pagec"></ul></div><div id="navs"></div><script type="text/javascript">function bb(a){alert(a.innerHTML);}var arr = ["{$rcount}record,total{$pcount}page currenpage{cpage} "," indexpage"," prevpage "," nextpage "," lastpage "];var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,null); //此為默認頁碼格式//var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,arr); //自定義頁碼格式zp.init();</script></body></html> <center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網(wǎng)頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 Extjs 4 自定義panel邊框,解決雙重邊框問題

下一篇 Access入門教程 15.8 為宏的操作設(shè)定條件

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

javascript分頁類支持頁碼格式