javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak

來源：懂視網責編：小采時間：2020-11-27 20:46:06

javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak

javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak:前端時間因為項目需要，要對一個產品下所有的附屬圖片進行分頁顯示，沒考慮ajax一張張請求，所以干脆一次性全部把圖片out，然后在載入的時候進行分頁，網上很多jquery,property等都實現了但是他們插件的附屬功能很多又不需要，而且沒必要就為了這么一個功能區

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak:前端時間因為項目需要，要對一個產品下所有的附屬圖片進行分頁顯示，沒考慮ajax一張張請求，所以干脆一次性全部把圖片out，然后在載入的時候進行分頁，網上很多jquery,property等都實現了但是他們插件的附屬功能很多又不需要，而且沒必要就為了這么一個功能區

前端時間因為項目需要，要對一個產品下所有的附屬圖片進行分頁顯示，沒考慮ajax一張張請求，所以干脆一次性全部把圖片out，然后在載入的時候進行分頁，網上很多jquery,property等都實現了

但是他們插件的附屬功能很多又不需要，而且沒必要就為了這么一個功能區引用這個庫，為速度考慮吧，當然你服務器好也行，但是其實這個效果不是必須的，但是覺的會常用，所以就包裝成類了，供以后使用，也供有需要的人學習使用。

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

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

jpage.js

/* 排序工具 by Funny ZAk <silenceacegmail.com> 2009-8-23 
"調用方式 var zp = new zakPage(參數);zp.init(); 
參數以此為 源內容容器，分頁結果容器，導航容器，頁大小,單挑內容回調函數返回li對象,每個li的樣式,選擇后的樣式沒有則為null或"" 
，默認起始頁數,格式化頁碼顯示格式*/ 
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; 
 } 
 }

下面是完整的測試代碼，js已經包括在內

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
body { 
 text-align:center; 
 padding:20px 0 0 0; 
 font-size:12px; 
} 
a { 
 color:#000; 
 font-size:12px; 
 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" charset="gb2312"> 
/* 排序工具 by Funny ZAk <silenceacegmail.com> 2009-8-23 
"調用方式 var zp = new zakPage(參數);zp.init(); 
參數以此為 源內容容器，分頁結果容器，導航容器，頁大小,單挑內容回調函數返回li對象,每個li的樣式,選擇后的樣式沒有則為null或"" 
，默認起始頁數,格式化頁碼顯示格式*/ 
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> 
<ul id="jpage"> 
<li><a href="http://www.gxlcms.com/article/21316.htm" title="Php 構造函數construct的前下劃線是雙的_">Php 構造函數construct的前下劃線是</a></li> 
<li><a href="http://www.gxlcms.com/article/21261.htm" title="PHP 讀取文件內容代碼(txt,js等)">PHP 讀取文件內容代碼(txt,js等)</a></li> 
<li><a href="http://www.gxlcms.com/article/21248.htm" title="PHP 用數組降低程序的時間復雜度">PHP 用數組降低程序的時間復雜度</a></li> 
<li><a href="http://www.gxlcms.com/article/21245.htm" title="PHP 柱狀圖實現代碼">PHP 柱狀圖實現代碼</a></li> 
<li><a href="http://www.gxlcms.com/article/21232.htm" title="Ajax+PHP邊學邊練 之五 圖片處理">Ajax+PHP邊學邊練 之五 圖片處理</a></li> 
<li><a href="http://www.gxlcms.com/article/21228.htm" title="PHPMyadmin 配置文件詳解(配置)">PHPMyadmin 配置文件詳解(配置)</a></li> 
<li><a href="http://www.gxlcms.com/article/21216.htm" title="又一個php 分頁類實現代碼">又一個php 分頁類實現代碼</a></li> 
<li><a href="http://www.gxlcms.com/article/21215.htm" title="php 無限分類的樹類代碼">php 無限分類的樹類代碼</a></li> 
<li><a href="http://www.gxlcms.com/article/21207.htm" title="Asp.net 文本框全選的實現">Asp.net 文本框全選的實現</a></li> 
<li><a href="http://www.gxlcms.com/article/21205.htm" title="php zip文件解壓類代碼">php zip文件解壓類代碼</a></li> 
li><a href="/photoshop/23037.html" target="_blank">各種男女圍巾圍法圖文</a></li><li> 
<a href="/photoshop/23036.html" target="_blank">photoshop 鼠繪憂郁的少女頭像</a></li> 
<li><a href="/photoshop/23035.html" target="_blank">Photoshop 一只可愛的卡通小蜜蜂</a></li> 
<li><a href="/photoshop/23034.html" target="_blank">Photoshop 調出美女質感的紅紫色膚色</a></li> 
<li><a href="/photoshop/23033.html" target="_blank">Photoshop 古典的油畫效果處理方法</a></li> 
<li><a href="/photoshop/22983.html" target="_blank">photoshop 利用濾鏡及素材打造超酷的火焰字</a></li> 
<li><a href="/photoshop/22982.html" target="_blank">photoshop 鼠繪漂亮的熟睡公主</a></li> 
<li><a href="/photoshop/22981.html" target="_blank">Photoshop 華麗的金色寶石皇冠</a></li> 
<li><a href="/photoshop/22980.html" target="_blank">Photoshop 粉紅色的人物寫真圖片</a></li> 
<li><a href="/photoshop/22979.html" target="_blank">Photoshop 漂亮的紫色人物簽名效果</a></li> 
<li><a href="/photoshop/22978.html" target="_blank">Photoshop 偏暗的圣誕美女美白</a></li><li><a href="/photoshop/22954.html" target="_blank">Photoshop 藍色夢幻的潮流壁紙制作</a></li><li><a href="/photoshop/22953.html" target="_blank">Photoshop調色教程 人物淡灰色質感膚色</a></li><li><a href="/photoshop/22947.html" target="_blank">Photoshop 漂亮的圣誕彩球制作</a></li><li><a href="/photoshop/22946.html" target="_blank">Photoshop 簡單的光照字效果</a></li> 
<li><a href="http://www.gxlcms.com/tools/html-js.htm" target="_blank">HTML/JS互相轉換工具-IE7兼容版</a></li> 
<li><a href="http://www.gxlcms.com/tools/cssyasuo.shtml" target="_blank">css 在線壓縮工具</a></li> 
<li><a href="http://www.gxlcms.com/csstidy/css_optimiser.php?lang=zh" target="_blank">CSS整形與最佳化工具[壓縮] </a></li> 
<li><a href="http://www.gxlcms.com/tools/jsmin/index.htm" target="_blank">JS Minifier js壓縮</a></li> 
<li><a href="http://www.gxlcms.com/tools/packer.htm" target="_blank">packer_至強的javascript在線加密工具</a></li> 
<li><a href="http://www.gxlcms.com/tools/bihe/index.htm" target="_blank">XHTML 代碼嵌套查看工具[標簽閉合]</a></li> 
<li><a href="http://www.gxlcms.com/tools/jinzhi.htm" target="_blank">腳本之家 在線進制轉換 可以實現各類進制間</a></li> 
<li><a href="http://www.gxlcms.com/tools/js_Debug.htm" target="_blank">在線JS腳本校驗器檢測js錯誤 </a></li> 
<li><a href="http://www.gxlcms.com/tools/htmlto.htm" target="_blank">將html轉換為php,javascript和asp的在線工具</a></li> 
<li><a href="http://www.gxlcms.com/tools/zhengze.html" target="_blank" rel="external">正則表達式30分鐘入門教程</a></li> 
<li><a href="http://www.gxlcms.com/article/18526.htm" target="_blank" rel="external">正則表達式 基礎資料</a></li> 
<li><a href="http://www.gxlcms.com/w3school/js/index.asp.htm" target="_blank">javascript 在線參考手冊</a></li> 
<li><a href="http://www.gxlcms.com/shouce/vbscript/index.html" target="_blank">vbscript微軟官方參考手冊</a></li> 
<li><a href="http://www.gxlcms.com/shouce/jquery/jQuery_study.html" target="_blank">jQuery入門指南教程</a></li> 
<li><a href="http://www.gxlcms.com/w3school/asp/index.asp.htm" target="_blank">asp 學習在線手冊</a></li> 
<li><a href="http://www.gxlcms.com/shouce/php5/index.htm" title="photoshop教程" target="_blank">php5最新中文參考手冊</a></li> 
<li><a href="http://img.jb51.net/shouce/mysql/index.html" title="mysql 5.1 參考手冊" target="_blank">mysql</a></li> 
<li><a href="http://www.gxlcms.com/w3school/sql/index.asp.htm" title="sql數據庫學習" target="_blank">sql數據庫學習</a></li> 
<li><a href="http://www.gxlcms.com/adtest/index.htm" rel="external">常用廣告代碼</a></li> 
<li><a href="http://www.gxlcms.com/tools/baidu/index.asp" target="_blank">百度近日收錄查詢</a></li> 
<li><a href="http://tools.jb51.net/alexa/index.asp" target="_blank">alexa排名查詢</a></li> 
<li><a href="http://tools.jb51.net/whois.asp" target="_blank">IP/域名WHOIS</a></li> 
<li><a href="http://www.gxlcms.com/codes/list37_1.html" target="_blank">網頁編輯器</a></li> 
<li><a href="http://www.gxlcms.com/tools/qq.html" target="_blank">QQ在線強制聊天工具 加強修正版</a></li> 
<li><a href="http://www.gxlcms.com/tools/xunleijm.htm" target="_blank">迅雷 快車專用鏈接加密解密js代碼</a></li> 
<li><a href="http://www.gxlcms.com/tools/fanjianzhi.htm" target="_blank">在線繁簡體字轉換</a></li> 
<li><a href="/shouce/html/index.html" target="_blank">html中文完全手冊</a></li> 
<li><a href="http://www.gxlcms.com//tools/qvod.html" target="_blank">qvod解密工具 馬克思</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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak

推薦度：

點擊下載本文 文檔為doc格式

標簽： javascript 分頁 demo

熱門焦點

javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak

javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak

javascript支持頁碼格式的分頁類_javascript技巧JpageDemo-byfunnyzak

最新推薦

猜你喜歡

熱門推薦