当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 支持页码格式的分页类

Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
javascript(jquery)利用函数修改全局变量的代码
JQuery 解析多维的Json数据格式
javascript 按回车键相应按钮提交事件
深入认识javascript中的eval函数
jquery tree 可编辑节点实现代码(jquery一句话节点菜单)
js window.onload 加载多个函数的方法
MAC官方菜单纯CSS实现灰色会换色
CSS Filter背景透明提示
CSS鼠标悬停菜单 图片交换技术实现
纯JS图片批量预加载技术代码
实用的层滑开js实现代码
jQuery get和post 方法传值注意事项
JQuery打造PHP的AJAX表单提交实例
Jquery AJAX 框架的使用方法
基于JQuery框架的AJAX实例代码
jquery ajax 检测用户注册时用户名是否存在
javascript 限制输入脚本大全
JavaScript window.setTimeout() 的详细用法
JavaScript 表格高亮类的应用[高级]

Javascript 中的 javascript 支持页码格式的分页类


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 116 ::
收藏到网摘: n/a

前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑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已经包括在内

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]