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

Javascript
用Javascript实现锚点(Anchor)间平滑跳转
实现png图片和png背景透明(支持多浏览器)的方法
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
用DIV完美模拟createPopup 弹出窗口(修正版),支持Firefox,ie,chrome
JavaScript 中级笔记 第一章
IE与Firefox在JavaScript上的7个不同写法小结
MooTools 1.2介绍
Mootools 1.2教程(2) DOM选择器
Mootools 1.2教程(3) 数组使用简介
在IE下获取object(ActiveX)的Param的代码
ExtJS 配置和表格控件使用
javascript 缓冲效果实现代码 推荐
html数组字符串拼接的最快方法
JavaScript 浮动定位提示效果实现代码
类似CSDN图片切换效果脚本
javascript 面向对象编程 function也是类
javascript 面向对象编程 聊聊对象的事
javascript 面向对象编程 function是方法(函数)
[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
jQuery slider Content(左右控制移动)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 120 ::
收藏到网摘: 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 全选 提示:你可先修改部分代码,再按运行]