首頁 > 開發者 > JavaScript
前端時間因為項目需要，要對一個產品下所有的附屬圖片進行分頁顯示，沒考慮ajax一張張請求，所以乾脆一次性全部把圖片out，然後在載入的時候進行分頁，網上很多jquery,property等都實現了，但是他們外掛程式的附屬功能很多又不需要，而且沒必要就為了這麼一個功能區引用這個庫，為速度考慮吧，當然你伺服器好也行，但是其實這個效果不是必須的，但是覺的會常用，所以就封裝成類了，供以後使用，也供有需要的人學習使用。
下面只是一個簡單的demo,用的話自己可以在編輯頁碼樣式，有預設的格式。不廢話了，自己看吧，有注釋使用說明。。。類（3kb)使用可以參照demo，不明白使用的可以留言。
以後會慢慢寫一些項目開發中常遇到的問題，以及解決方案，和大家學習分享。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><style type="text/css"><br />body {<br />text-align:center;<br />padding:20px 0 0 0;<br />font-size:12px;<br />}<br />a {<br />color:#000;<br />font-size:12px;<br />cursor:pointer;<br />}<br />ul, li {<br />margin:0;<br />padding:0;<br />list-style:none;<br />}<br />.contain {<br />margin:0 auto;<br />width:825px;<br />text-align:left;<br />border:1px #000 solid;<br />padding:5px;<br />height:auto;<br />}<br />li.sd a,li.sd a:link,li.sd a:visited{background-color:#000; color:#FFF; font-size:13px;}<br /></style><br /><title>Jpage Demo - by funnyzak</title><br /><script type="text/javascript"><br />/* 排序工具 by Funny ZAk <silenceacegmail.com> 2009-8-23<br />"調用方式 var zp = new zakPage(參數);zp.init();<br />參數以此為 源內容容器，分頁結果容器，導航容器，頁大小,單挑內容回呼函數返回li對象,每個li的樣式,選擇後的樣式沒有則為null或""<br />，預設起始頁數,格式化頁碼顯示格式*/<br />function zakPage(id,pagec,navid,pagesize,lievt,ds,ss,idx,navp){<br />this.obj = this;<br />this.pageid = id;<br />this.pagec = pagec;<br />this.navc = navid;<br />this.pagesize = pagesize || 7;<br />this.lievt = lievt || null;<br />this.rcount = 0;<br />this.pagecount = 0;<br />this.cpage = 1;<br />this.ds = ds;<br />if(this.ds == null){this.ds = "";}<br />this.ss = ss;<br />if(this.ss == null){this.ss = "";}<br />this.idx = idx;<br />this.navpre = navp || ["共{$pcount}頁/{$rcount}條,當前第{cpage}頁","首頁","上一頁","下一頁","末頁"];<br />}<br />zakPage.prototype = {<br />init:function(){<br />document.getElementById(this.pageid).style.display = "none";<br />this.rcount = document.getElementById(this.pageid).getElementsByTagName("li").length;<br />var residue = this.rcount%this.pagesize;<br />var nums = parseInt(this.rcount/this.pagesize);<br />this.pagecount = nums;<br />if(residue != 0){this.pagecount = nums+1;}<br />this.gopage(this.idx);<br />},<br />guide:function(){<br />var nav = document.getElementById(this.navc);<br />var np = this.navpre;<br />nav.innerHTML = np[0].replace("{$rcount}",this.rcount).replace("{$pcount}",this.pagecount).replace("{cpage}",this.cpage);<br />nav.appendChild(this.createa(np[1],1));<br />nav.appendChild(this.createa(np[2],this.cpage-1));<br />nav.appendChild(this.createa(np[3],this.cpage+1));<br />nav.appendChild(this.createa(np[4],this.pagecount));<br />},<br />createa:function(html,index){<br />var aa = document.createElement("a");<br />aa.innerHTML = html;<br />var o = this.obj;<br />aa.onclick = function(){o.gopage(index);}<br />return aa;<br />},<br />gopage:function(index){<br />if(index>this.pagecount){index=1;}<br />if(index<=0){index = this.pagecount;}<br />this.cpage = index;<br />var ghtml = document.getElementById(this.pagec);<br />ghtml.innerHTML = "";<br />var pages = (index-1)*this.pagesize;<br />var pagee = pages+this.pagesize;<br />if(pagee>this.rcount){pagee = this.rcount;}<br />for(var i=pages;i<pagee;i++){<br />var lil = document.createElement("li");<br />lil.className = this.ds;<br />lil.innerHTML = this.litem(i);<br />var sss = this.ss;<br />if(this.lievt !=null){<br />lil.lievt = this.lievt;<br />lil.onclick = function(){<br />this.lievt(this);<br />this.className = sss;<br />}<br />}<br />ghtml.appendChild(lil);<br />}<br /> this.guide();<br />},<br />litem:function(index){<br />return document.getElementById(this.pageid).getElementsByTagName("li")[index].innerHTML;<br />}<br />}<br /></script><br /></head><br /><body><br /><div class="contain"><br /> <ul id="jpage"><br /> <li><a href="http://mo.zzit.com.cn/labs/20091128/232363.shtml" target="_blank" mon="ct=0&a=27&c=technnews">側滑全鍵盤 LG首款Google手機GW620評測</a></li><br /> <li><a href="http://mo.zzit.com.cn/market/20091128/232573.shtml" target="_blank" mon="ct=0&a=27&c=technnews">簡約大氣 三星3G音樂新機M519僅1280</a></li><br /> <li><a href="http://article.pchome.net/content-1014181.html" target="_blank" mon="ct=0&a=27&c=technnews">諾基亞N86 全能表現800萬像素僅售2K6</a></li><br /> <li><a href="http://mo.zzit.com.cn/new/20091128/232605.shtml" target="_blank" mon="ct=0&a=27&c=technnews">WM6.5系統 惠普iPaq Glisten手機發布</a></li><br /> <li><a href="http://mo.zzit.com.cn/buy/20091128/232622.shtml" target="_blank" mon="ct=0&a=27&c=technnews">享受完美視覺盛宴 經典高清大屏手機推薦</a></li><br /> <li><a href="http://internal.dbw.cn/system/2009/11/27/052239606.shtml" target="_blank" mon="ct=0&a=27&col=7">湖南一周死亡6名甲流患者</a></li><br /> <li><a href="http://news.sina.com.cn/c/2009-11-28/125416684006s.shtml" target="_blank" mon="ct=0&a=27&col=7">三鹿破產債權清償率為零 對結石患兒無錢可賠</a></li><br /> <li><a href="http://news.xinmin.cn/rollnews/2009/11/27/2990106.html" target="_blank" mon="ct=0&a=27&col=7">《蝸居》主演海清鳴不平:單純批評海藻不公平</a></li><br /> <li><a href="http://news.xinmin.cn/rollnews/2009/11/28/2992331.html" target="_blank" mon="ct=0&a=27&col=7">林志玲沙漠體驗浪人滋味 稱慘遭周杰倫捉弄(圖)</a></li><br /> <li><a href="http://news.cctv.com/law/20091128/100454.shtml" target="_blank" mon="ct=0&a=27&col=7">南京致5死4傷醉駕案公審 張明寶流淚大喊對不起</a></li><br /> <li><a href="http://tv.sohu.com/20091128/n268540542.shtml" target="_blank" mon="ct=0&a=27&col=7">視頻:瀋陽老虎咬人事件原因查明 積雪致電網失效</a></li><br /> <li><a href="http://sports.sohu.com/20091128/n268535705.shtml" target="_blank" mon="ct=0&a=27&col=7">幸運彩民逛街也不忘買彩 喜中"紅櫻桃"4000元</a></li><br /> <li><a href="http://finance.sina.com.cn/money/forex/20091128/04277029051.shtml" target="_blank">杜拜債務危機推動美元忽然大漲</a><span class="time"> 04:27</span></li><br /> <li><a href="http://finance.sina.com.cn/money/fund/20091128/04057028862.shtml" target="_blank">牛市願景VS震蕩加劇 指基投資陷入囚徒困境 </a><span class="time"> 04:05</span></li><br /> <li><a href="http://finance.sina.com.cn/money/fund/20091128/04057028859.shtml" target="_blank">低風險產品是亮點 11月中下旬新基金髮行綜述</a><span class="time"> 04:05</span></li><br /> <!-- --><br /> <li><a href="http://finance.sina.com.cn/consume/20091129/11257030393.shtml" target="_blank">國泰航空飛機10個廁所全壞掉 被迫提前著陸</a><span class="time"> 11:25</span></li><br /> <li><a href="http://finance.sina.com.cn/consume/20091128/10237029443.shtml" target="_blank">廣州奢侈品展開幕 買家爭求8000萬元巨鑽</a><span class="time"> 10:23</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/cngem/gemipo/20091129/20347030740.shtml" target="_blank">大禹節水30日起複牌 不存在未披露重大事項</a><span class="time"> 20:34</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/cngem/gemipo/20091129/16417030615.shtml" target="_blank">創業板第一高價股神州泰嶽11月30日起停牌核實</a><span class="time"> 16:41</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/y/20091129/16177030594.shtml" target="_blank">周末影響市場重要資訊回顧及展望</a><span class="time"> 16:17</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/s/20091129/15467030568.shtml" target="_blank">大楊創世：受到巴菲特青睞的中國裁縫商</a><span class="time"> 15:46</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/s/20091129/10197030320.shtml" target="_blank">蓮花味精漲價成遊資噱頭 機構高位接盤令人難解</a><span class="time"> 10:19</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/data/20091128/16487029826.shtml" target="_blank">下周A股限售股解禁市值環比下降逾四成 </a><span class="time"> 16:48</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/hkstock/hkstocknews/20091127/21417027999.shtml" target="_blank">曾俊華：杜拜債務危機對香港銀行業影響不大</a><span class="time"> 21:41</span></li> <li><a href="http://mo.zzit.com.cn/labs/20091128/232363.shtml" target="_blank" mon="ct=0&a=27&c=technnews">側滑全鍵盤 LG首款Google手機GW620評測</a></li><br /> <li><a href="http://mo.zzit.com.cn/market/20091128/232573.shtml" target="_blank" mon="ct=0&a=27&c=technnews">簡約大氣 三星3G音樂新機M519僅1280</a></li><br /> <li><a href="http://article.pchome.net/content-1014181.html" target="_blank" mon="ct=0&a=27&c=technnews">諾基亞N86 全能表現800萬像素僅售2K6</a></li><br /> <li><a href="http://mo.zzit.com.cn/new/20091128/232605.shtml" target="_blank" mon="ct=0&a=27&c=technnews">WM6.5系統 惠普iPaq Glisten手機發布</a></li><br /> <li><a href="http://mo.zzit.com.cn/buy/20091128/232622.shtml" target="_blank" mon="ct=0&a=27&c=technnews">享受完美視覺盛宴 經典高清大屏手機推薦</a></li><br /> <li><a href="http://internal.dbw.cn/system/2009/11/27/052239606.shtml" target="_blank" mon="ct=0&a=27&col=7">湖南一周死亡6名甲流患者</a></li><br /> <li><a href="http://news.sina.com.cn/c/2009-11-28/125416684006s.shtml" target="_blank" mon="ct=0&a=27&col=7">三鹿破產債權清償率為零 對結石患兒無錢可賠</a></li><br /> <li><a href="http://news.xinmin.cn/rollnews/2009/11/27/2990106.html" target="_blank" mon="ct=0&a=27&col=7">《蝸居》主演海清鳴不平:單純批評海藻不公平</a></li><br /> <li><a href="http://news.xinmin.cn/rollnews/2009/11/28/2992331.html" target="_blank" mon="ct=0&a=27&col=7">林志玲沙漠體驗浪人滋味 稱慘遭周杰倫捉弄(圖)</a></li><br /> <li><a href="http://news.cctv.com/law/20091128/100454.shtml" target="_blank" mon="ct=0&a=27&col=7">南京致5死4傷醉駕案公審 張明寶流淚大喊對不起</a></li><br /> <li><a href="http://tv.sohu.com/20091128/n268540542.shtml" target="_blank" mon="ct=0&a=27&col=7">視頻:瀋陽老虎咬人事件原因查明 積雪致電網失效</a></li><br /> <li><a href="http://sports.sohu.com/20091128/n268535705.shtml" target="_blank" mon="ct=0&a=27&col=7">幸運彩民逛街也不忘買彩 喜中"紅櫻桃"4000元</a></li><br /> <li><a href="http://finance.sina.com.cn/money/forex/20091128/04277029051.shtml" target="_blank">杜拜債務危機推動美元忽然大漲</a><span class="time"> 04:27</span></li><br /> <li><a href="http://finance.sina.com.cn/money/fund/20091128/04057028862.shtml" target="_blank">牛市願景VS震蕩加劇 指基投資陷入囚徒困境 </a><span class="time"> 04:05</span></li><br /> <li><a href="http://finance.sina.com.cn/money/fund/20091128/04057028859.shtml" target="_blank">低風險產品是亮點 11月中下旬新基金髮行綜述</a><span class="time"> 04:05</span></li><br /> <!-- --><br /> <li><a href="http://finance.sina.com.cn/consume/20091129/11257030393.shtml" target="_blank">國泰航空飛機10個廁所全壞掉 被迫提前著陸</a><span class="time"> 11:25</span></li><br /> <li><a href="http://finance.sina.com.cn/consume/20091128/10237029443.shtml" target="_blank">廣州奢侈品展開幕 買家爭求8000萬元巨鑽</a><span class="time"> 10:23</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/cngem/gemipo/20091129/20347030740.shtml" target="_blank">大禹節水30日起複牌 不存在未披露重大事項</a><span class="time"> 20:34</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/cngem/gemipo/20091129/16417030615.shtml" target="_blank">創業板第一高價股神州泰嶽11月30日起停牌核實</a><span class="time"> 16:41</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/y/20091129/16177030594.shtml" target="_blank">周末影響市場重要資訊回顧及展望</a><span class="time"> 16:17</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/s/20091129/15467030568.shtml" target="_blank">大楊創世：受到巴菲特青睞的中國裁縫商</a><span class="time"> 15:46</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/s/20091129/10197030320.shtml" target="_blank">蓮花味精漲價成遊資噱頭 機構高位接盤令人難解</a><span class="time"> 10:19</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/data/20091128/16487029826.shtml" target="_blank">下周A股限售股解禁市值環比下降逾四成 </a><span class="time"> 16:48</span></li><br /> <li><a href="http://finance.sina.com.cn/stock/hkstock/hkstocknews/20091127/21417027999.shtml" target="_blank">曾俊華：杜拜債務危機對香港銀行業影響不大</a><span class="time"> 21:41</span></li><br /> </ul><br /> <ul id="pagec"><br /> </ul><br /></div><br /><div id="navs"></div><br /><script type="text/javascript"><br />function bb(a){alert(a.innerHTML);}<br />var arr = ["{$rcount}record,total{$pcount}page currenpage{cpage} "," indexpage"," prevpage "," nextpage "," lastpage "];<br />var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,null); //此為預設頁碼格式<br />//var zp = new zakPage("jpage","pagec","navs",15,bb,null,null,4,arr); //自訂頁碼格式<br />zp.init();<br /></script><br /></body><br /></html><br />
運行代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
