JAVASCRIPT 面向对象编程 通用翻页控件
2012-06-02 20:18 chris-shao 阅读(1811) 评论(2) 编辑 收藏 举报JAVASCRIPT编程现在在网页前端中越来越占有更高比重。 也试着实现一个易扩展的JAVASCRIPT 类，在核心类中不依赖类库，另外，可以将此类作为jQuery的扩展使用。
注：本代码在Firefox. IE 9 标准模式中测试通过，。
核心类代码如下：
1 /*
2 通用翻页Javascript控件
3 功能：提供通用的javascript控制
4 特点：面向对象编程，提供翻页控件原型，易扩展,基于事件扩展
5 开发：Chirs Shao
6 日期：2012-6-2
7 */
8 //Pager 构造函数
9 var Pager=function(/*记录总数*/args){
10 if(typeof args=="number"&&args>0)
11 this.recordCount=args;
12 //如果传入对象.复制对象属性到Pager
13 else if(typeof args=="object")
14 {
15 for(n in args)
16 {
17 this[n]=args[n];
18 }
19 }
20 };
21 //当前页码初始值
22 Pager.prototype.pageIndex=0;
23 //当前页尺寸
24 Pager.prototype.pageSize=10;
25 //总记录数
26 Pager.prototype.recordCount=0;
27 //页总数只读
28 Pager.prototype.getPageCount=function(){return this.pageSize>0? Math.round( this.recordCount/this.pageSize):0}
29 //翻页控件显示函数，继承本类后，重写本函数实现自定义显示效果
30 Pager.prototype.Display=function(/*包含翻页控件的HTML对象*/container){
31 if(container)
32 this._container=container;//记录包含控件对象,当发生事件重写时不需要重新传递此值
33 var _html="";
34 for(var i=0;i<this.getPageCount();i++)
35 {
36 if(i==parseInt(this.pageIndex))//当前页.不需要事件
37 _html+="<span>"+(i+1)+"</span> ";
38 else//需要翻页的页码
39 _html+="<a href='javascript:void(0)' rel='"+i+"'>"+(i+1)+"</a> ";
40 }
41 var indexstr=1+parseInt(this.pageIndex);
42 //最后显示页码状态
43 this._container.innerHTML=_html+" >"+indexstr+"/"+this.getPageCount();
44 //临时记录上下文对象
45 var self=this;
46 for(var i =0, nodes=this._container.childNodes;i<nodes.length;i++)
47 {
48 var node=nodes[i];
49 if(node.tagName==='A')//为A标签的所有对象添加事件.
50 {
51 if(window.addEventListener)
52 node.addEventListener("click",function(){pageIndexChange.call(self,this.rel)});
53 else if(window.attachEvent)
54 node.attachEvent("onclick",function(){pageIndexChange.call(self,this.rel)});
55
56 }
57 }
58 //内部调用函数.当改变当前页时使用
59 var pageIndexChange=function(index)
60 {
61 //更新对象中当前页码
62 self.pageIndex=index;
63 //更新显示
64 self.Display();
65 //如果有页码改变调用事件函数就调用.调用时需要自定义事件
66 if(typeof self.onPageIndexChange ==='function')
67 {
68 self.onPageIndexChange.call(self,self.pageIndex);
69 }
70 }
71 }
2 通用翻页Javascript控件
3 功能：提供通用的javascript控制
4 特点：面向对象编程，提供翻页控件原型，易扩展,基于事件扩展
5 开发：Chirs Shao
6 日期：2012-6-2
7 */
8 //Pager 构造函数
9 var Pager=function(/*记录总数*/args){
10 if(typeof args=="number"&&args>0)
11 this.recordCount=args;
12 //如果传入对象.复制对象属性到Pager
13 else if(typeof args=="object")
14 {
15 for(n in args)
16 {
17 this[n]=args[n];
18 }
19 }
20 };
21 //当前页码初始值
22 Pager.prototype.pageIndex=0;
23 //当前页尺寸
24 Pager.prototype.pageSize=10;
25 //总记录数
26 Pager.prototype.recordCount=0;
27 //页总数只读
28 Pager.prototype.getPageCount=function(){return this.pageSize>0? Math.round( this.recordCount/this.pageSize):0}
29 //翻页控件显示函数，继承本类后，重写本函数实现自定义显示效果
30 Pager.prototype.Display=function(/*包含翻页控件的HTML对象*/container){
31 if(container)
32 this._container=container;//记录包含控件对象,当发生事件重写时不需要重新传递此值
33 var _html="";
34 for(var i=0;i<this.getPageCount();i++)
35 {
36 if(i==parseInt(this.pageIndex))//当前页.不需要事件
37 _html+="<span>"+(i+1)+"</span> ";
38 else//需要翻页的页码
39 _html+="<a href='javascript:void(0)' rel='"+i+"'>"+(i+1)+"</a> ";
40 }
41 var indexstr=1+parseInt(this.pageIndex);
42 //最后显示页码状态
43 this._container.innerHTML=_html+" >"+indexstr+"/"+this.getPageCount();
44 //临时记录上下文对象
45 var self=this;
46 for(var i =0, nodes=this._container.childNodes;i<nodes.length;i++)
47 {
48 var node=nodes[i];
49 if(node.tagName==='A')//为A标签的所有对象添加事件.
50 {
51 if(window.addEventListener)
52 node.addEventListener("click",function(){pageIndexChange.call(self,this.rel)});
53 else if(window.attachEvent)
54 node.attachEvent("onclick",function(){pageIndexChange.call(self,this.rel)});
55
56 }
57 }
58 //内部调用函数.当改变当前页时使用
59 var pageIndexChange=function(index)
60 {
61 //更新对象中当前页码
62 self.pageIndex=index;
63 //更新显示
64 self.Display();
65 //如果有页码改变调用事件函数就调用.调用时需要自定义事件
66 if(typeof self.onPageIndexChange ==='function')
67 {
68 self.onPageIndexChange.call(self,self.pageIndex);
69 }
70 }
71 }
创建jQuery 扩展。
1 //扩展jQuery对象，实现Pager扩展
2 jQuery.fn.Pager=function(recordcount,onchangeEvent){
3 var p=new Pager(recordcount);
4 p.Display(this[0]);
5 p.onPageIndexChange=onchangeEvent;
6 return this;
7 }
2 jQuery.fn.Pager=function(recordcount,onchangeEvent){
3 var p=new Pager(recordcount);
4 p.Display(this[0]);
5 p.onPageIndexChange=onchangeEvent;
6 return this;
7 }
测试调用。如果需要控制翻页内容，就需要在订阅事件中根据index的值，获取分页内容（从Ajax或者数组中，然后控制显示即可）
1 //当页面加载完后调用.创建测试对象.总记录数100,当页码改变时显示当前页码和总页码数
2 $(function(){
3 $("#content").html("请点击下面的页码");
4 $("#showpager").Pager(100,function(index){document.getElementById("content").innerHTML="总页数:"+this.getPageCount()+"/当前页"+index;});
5 })
2 $(function(){
3 $("#content").html("请点击下面的页码");
4 $("#showpager").Pager(100,function(index){document.getElementById("content").innerHTML="总页数:"+this.getPageCount()+"/当前页"+index;});
5 })
