您當(dāng)前位置：首頁(yè) > web前端 > jscript > javascript分頁(yè)類支持頁(yè)碼格式

javascript分頁(yè)類支持頁(yè)碼格式

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

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

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

以后會(huì)慢慢寫一些項(xiàng)目開發(fā)中常遇到的問(wèn)題，以及解決方案，和大家學(xué)習(xí)分享。

<!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分頁(yè)類支持頁(yè)碼格式-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)容容器，分頁(yè)結(jié)果容器，導(dǎo)航容器，頁(yè)大小,單挑內(nèi)容回調(diào)函數(shù)返回li對(duì)象,每個(gè)li的樣式,選擇后的樣式?jīng)]有則為null或""，默認(rèn)起始頁(yè)數(shù),格式化頁(yè)碼顯示格式*/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}頁(yè)/{$rcount}條,當(dāng)前第{cpage}頁(yè)","首頁(yè)","上一頁(yè)","下一頁(yè)","末頁(yè)"];}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.jyygyx.com/a/view/11372.html">BTchina遭關(guān)閉視頻“版權(quán)門”BT下載模式堪憂</a></li><li>09日<a target="_blank" href="http://www.jyygyx.com/a/view/11371.html">支付寶總裁邵曉峰裸奔慶祝業(yè)績(jī)提前達(dá)標(biāo)</a></li><li>09日<a target="_blank" href="http://www.jyygyx.com/a/view/11369.html">吶喊：站長(zhǎng)們一定要堅(jiān)定地走下去！</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11366.html">王鈺鈞:讓百度每天更新收錄的成功經(jīng)驗(yàn)</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11363.html">百度競(jìng)價(jià)排名系統(tǒng)被指未完全＂下架＂</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11362.html">百度新筑鳳巢不良網(wǎng)站仍可購(gòu)買搜索關(guān)鍵詞</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11361.html">為2010年考慮網(wǎng)站調(diào)整SEO戰(zhàn)略</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11360.html">要脫穎而出更要安全五個(gè)關(guān)鍵詞幫網(wǎng)店賣家建</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11339.html">無(wú)視聽許可BTChina關(guān)站澄清站長(zhǎng)被拘傳言</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11336.html">內(nèi)部鏈接還是外部鏈接?</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11335.html">如何向Google資訊推薦和提交新聞網(wǎng)站內(nèi)容</a></li><li>07日<a target="_blank" href="http://www.jyygyx.com/a/view/11333.html">百度遭遇山寨版網(wǎng)站律師稱模仿者侵權(quán)</a></li><li>05日<a target="_blank" href="http://www.jyygyx.com/a/view/11326.html">對(duì)于央視曝光“百谷成”事件的看法</a></li><li>05日<a target="_blank" href="http://www.jyygyx.com/a/view/11320.html">新網(wǎng)DNS域名解析故障 Dnspod趁機(jī)漲價(jià)？</a></li><li>04日<a target="_blank" href="http://www.jyygyx.com/a/view/11319.html">我的淘寶網(wǎng)服裝站還能經(jīng)的起此次的風(fēng)波嗎？</a></li><li>04日<a target="_blank" href="http://www.jyygyx.com/a/view/11318.html">站長(zhǎng)如何去創(chuàng)造搜索源來(lái)推廣網(wǎng)站</a></li><li>04日<a target="_blank" href="http://www.jyygyx.com/a/view/11308.html">技術(shù)性站長(zhǎng)應(yīng)該避免的10個(gè)毛病</a></li><li>04日<a target="_blank" href="http://www.jyygyx.com/a/view/11307.html">做站長(zhǎng)的打死不能買新網(wǎng)域名</a></li><li>04日<a target="_blank" href="http://www.jyygyx.com/a/view/11306.html">“網(wǎng)站運(yùn)營(yíng)”簡(jiǎn)言之就是制定有效的盈利模式</a></li><li>04日<a target="_blank" href="http://www.jyygyx.com/a/view/11303.html">安徽炎黃網(wǎng)絡(luò)被調(diào)查殃及上萬(wàn)網(wǎng)站無(wú)法訪問(wèn)</a></li><li>03日<a target="_blank" href="http://www.jyygyx.com/a/view/11298.html">別迷戀百度鳳巢鳳巢只是個(gè)傳說(shuō)</a></li><li>03日<a target="_blank" href="http://www.jyygyx.com/a/view/11297.html">網(wǎng)站標(biāo)簽優(yōu)化一小步排名一大步</a></li><li>03日<a target="_blank" href="http://www.jyygyx.com/a/view/11288.html">百度貼吧六周年慶啟用tieba.com新域名</a></li><li>03日<a target="_blank" href="http://www.jyygyx.com/a/view/11270.html">淺淡：關(guān)于最近IDC商的“痛”</a></li><li>03日<a target="_blank" href="http://www.jyygyx.com/a/view/11271.html">百度“鳳巢門”搞的草根站長(zhǎng)人心惶惶</a></li><li>03日<a target="_blank" href="http://www.jyygyx.com/a/view/11272.html">情色六月網(wǎng)站傳播色情張方耀獲刑十一年</a></li><li>02日<a target="_blank" href="http://www.jyygyx.com/a/view/11266.html">PHPCMS 新版本發(fā)布在即未來(lái)發(fā)展空間更大</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11224.html">百度算法怎么更新都要以體驗(yàn)度為尺度</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11217.html">“百度熊”的掌上戰(zhàn)略初見雛形</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11215.html">做網(wǎng)站去淘寶逛逛是很有必要的</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11214.html">網(wǎng)站快速建立索引的幾種技巧</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11213.html">作為草根站長(zhǎng)我應(yīng)該何去何從</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11181.html">賽門鐵克發(fā)布100個(gè)最危險(xiǎn)網(wǎng)站排行榜</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11175.html">英文站長(zhǎng)需要知道的國(guó)外廣告聯(lián)盟</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11172.html">cPanel面板:快速上傳文件到空間的方法</a></li><li>01日<a target="_blank" href="http://www.jyygyx.com/a/view/11166.html">必應(yīng)2009年10大熱門搜索關(guān)鍵詞公布</a></li><li>30日<a target="_blank" href="http://www.jyygyx.com/a/view/11164.html">百度“我的個(gè)性化首頁(yè)”出現(xiàn)網(wǎng)頁(yè)錯(cuò)誤</a></li><li>30日<a target="_blank" href="http://www.jyygyx.com/a/view/11162.html">從 Google PageRank 解讀SEO的誤區(qū)</a></li><li>30日<a target="_blank" href="http://www.jyygyx.com/a/view/11161.html">讓你的網(wǎng)頁(yè)更受搜索引擎重視</a></li><li>30日<a target="_blank" href="http://www.jyygyx.com/a/view/11137.html">網(wǎng)站多次改版總結(jié)出來(lái)的經(jīng)驗(yàn)及教訓(xùn)</a></li><li>30日<a target="_blank" href="http://www.jyygyx.com/a/view/11134.html">新華社與阿里巴巴聯(lián)合打造雅虎新聞中心</a></li><li>30日<a target="_blank" href="http://www.jyygyx.com/a/view/11133.html">搜狐斥資7.5億在北京開發(fā)房地產(chǎn)項(xiàng)目</a></li><li>30日<a target="_blank" href="http://www.jyygyx.com/a/view/11132.html">利用 Feed2js 輕松將你的rss轉(zhuǎn)成JS</a></li><li>27日<a target="_blank" href="http://www.jyygyx.com/a/view/11067.html">維基百科創(chuàng)始人否認(rèn)4.9萬(wàn)編輯流失</a></li><li>27日<a target="_blank" href="http://www.jyygyx.com/a/view/11065.html">回答SEOWHY論壇會(huì)員菜鳥四則SEO小問(wèn)</a></li><li>27日<a target="_blank" href="http://www.jyygyx.com/a/view/11064.html">一個(gè)企業(yè)要注冊(cè)多少域名才算好</a></li><li>27日<a target="_blank" href="http://www.jyygyx.com/a/view/11051.html">站長(zhǎng)淺談:如何利用QQ、旺旺賺錢</a></li><li>27日<a target="_blank" href="http://www.jyygyx.com/a/view/11050.html">經(jīng)驗(yàn)分享:關(guān)于alt標(biāo)簽的應(yīng)用研究</a></li><li>27日<a target="_blank" href="http://www.jyygyx.com/a/view/11045.html">西聯(lián)匯款的現(xiàn)匯、現(xiàn)鈔買入價(jià)與基準(zhǔn)價(jià)問(wèn)題</a></li><li>26日<a target="_blank" href="http://www.jyygyx.com/a/view/11035.html">幫助谷歌收錄你的手機(jī)網(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); //此為默認(rèn)頁(yè)碼格式//var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,arr); //自定義頁(yè)碼格式zp.init();</script></body></html> <center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

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

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

上一篇 Extjs 4 自定義panel邊框,解決雙重邊框問(wèn)題

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

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

javascript分頁(yè)類支持頁(yè)碼格式