原生js编写基于面向对象的分页组件


Posted in Javascript onDecember 05, 2016

本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码,供大家参考,具体内容如下

文字表达有限,直接上代码了

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <title>一个基于面向对象的分页组件</title> 
 <style> 
 html,body{padding:0;margin:0;} 
 p{padding:0;margin:0;} 
 a{text-decoration: none} 
 .Paging{overflow: hidden;} 
 .Paging-item{float: left;padding: 10px 15px;background: #4caf50;color: #fff;margin-left: 5px;} 
 .Paging-item-active{background: #ff568e;} 
 </style> 
</head> 
<body> 
 <div id="page"></div> 
</body> 
<script> 
 //分页组件类 
 function Paging(container,opt){ 
 //自定义事件 
 this.eventHandlers={}; 
 //默认设置 
 this.config={ 
  nowNum: 1, 
  allNum: 10, 
  callback: function(){} 
 } 
 if(opt){ 
  this.extend(this.config,opt); 
 } 
 //外层容器 
 this.Box= null; 
 //渲染组件 
 this.render(container); 
 } 
 Paging.prototype={ 
 constructor: Paging, 
 /*绑定自定义事件*/ 
 on: function(eventType,eventHandler){ 
  if(typeof this.eventHandlers[eventType] === 'undefined'){ 
  this.eventHandlers[eventType]= []; 
  } 
  this.eventHandlers[eventType].push(eventHandler); 
 }, 
 /*触发自定义事件*/ 
 fire: function(eventType){ 
  if( this.eventHandlers[eventType] instanceof Array){ 
  var len= this.eventHandlers[eventType].length; 
  for(var i=0;i<len;i++){ 
   this.eventHandlers[eventType][i](); 
  } 
  } 
  
 }, 
 /*渲染UI结构*/ 
 renderUI: function(){ 
  this.Box= document.createElement('div'); 
  this.Box.className= 'Paging'; 
  var nowNum= this.config.nowNum; 
  var allNum= this.config.allNum; 
  //当前页大于或等于4,第一页才能隐藏,总数大于5才能显示首页 
  if (nowNum >=4 && allNum >=6) { 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-start' 
  pageA.href='#1'; 
  pageA.innerHTML= '首页'; 
  this.Box.appendChild(pageA); 
  }; 
  //当前页只要不是第一页就显示上一页 
  if(nowNum>=2){ 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-pre' 
  pageA.href='#'+ (nowNum-1); 
  pageA.innerHTML= '上一页'; 
  this.Box.appendChild(pageA); 
  } 
  
  //只有5页时 
  if(allNum<=5){ 
   
  for(var i=1;i<=allNum;i++){ 
   var pageA= document.createElement('a'); 
   pageA.className= 'Paging-item' 
   pageA.href= '#'+ i; 
   if(nowNum==i){ 
   pageA.className= 'Paging-item Paging-item-active' 
   pageA.innerHTML=i; 
   }else{ 
   // pageA.innerHTML='['+ i +']'; 
   pageA.innerHTML=i; 
   }   
   this.Box.appendChild(pageA); 
  } 
   
  }else{ 
  for(var i=1;i<=5;i++){ 
   var pageA= document.createElement('a'); 
   pageA.className= 'Paging-item' 
   pageA.href= '#'+ (nowNum-3+i); 
   //对当前页为前2页的处理 
   if(nowNum === 1 || nowNum === 2){ 
   pageA.href= '#'+ i; 
   if(nowNum === i){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML= i; 
   }else{ 
    // pageA.innerHTML= '['+i+']'; 
    pageA.innerHTML= i; 
   } 
   }/*对当前页为后2页的处理*/else if((allNum-nowNum) ===0 || (allNum-nowNum) === 1){ 
   /*== 
    <a href="">[6]</a> 
    <a href="">[7]</a> 
    <a href="">[8]</a> 
    <a href="">[9]</a> 
    <a href="">10</a> 
   ==*/ 
   pageA.href= '#'+ ((allNum-5)+i); 
   if((allNum-nowNum) ===0 && i===5){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML=((allNum-5)+i); 
   }else if((allNum-nowNum) ===1 && i===4){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML=((allNum-5)+i); 
   }else{ 
    // pageA.innerHTML= '['+ ((allNum-5)+i) +']' 
    pageA.innerHTML= ((allNum-5)+i) 
   } 
   }else{ 
   if(nowNum === (nowNum-3+i)){ 
    pageA.className= 'Paging-item Paging-item-active' 
    pageA.innerHTML= (nowNum-3+i); 
   }else{ 
    // pageA.innerHTML= '['+ (nowNum-3+i) +']' 
    pageA.innerHTML= (nowNum-3+i) 
   } 
   } 
   
   this.Box.appendChild(pageA); 
  } 
  } 
 
  if((allNum-nowNum) >=1){ 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-next' 
  pageA.href='#'+ (nowNum+1); 
  pageA.innerHTML= '下一页'; 
  this.Box.appendChild(pageA); 
  } 
  //选择7为标准,或7以下才能显示 
  if((allNum-nowNum) >= 3 && allNum >= 6){ 
  var pageA= document.createElement('a'); 
  pageA.className= 'Paging-item Paging-item-end' 
  pageA.href='#'+allNum; 
  pageA.innerHTML= '尾页'; 
  this.Box.appendChild(pageA); 
  } 
  
  
 
 }, 
 /*为UI绑定事件*/ 
 bindUI: function(){ 
  var self= this; 
  this.config.callback(this.config.nowNum,this.config.allNum); 
  //利用事件委托 
  self.Box.onclick= function(e){ 
  var e= e || window.event; 
  var target= e.target || e.srcElement; 
  if(typeof e.target.getAttribute('href') === 'string'){ 
   var nowNum= parseInt(target.getAttribute('href').substring(1)); 
   // console.log(nowNum); 
   self.Box.innerHTML= ''; 
   new Paging(null,{ 
   nowNum: nowNum, 
   allNum: self.config.allNum, 
   callback: self.config.callback 
   }) 
  } 
  return false; 
  } 
 }, 
 /*渲染UI*/ 
 render: function(container){ 
  this.renderUI(); 
  this.bindUI(); 
  if(container){ 
  var con= document.getElementById(container); 
  con.appendChild(this.Box); 
  }else{ 
  document.body.appendChild(this.Box); 
  } 
 }, 
 /*继承对象*/ 
 extend: function(obj1,obj2){ 
  for(attr in obj2){ 
  obj1[attr]= obj2[attr]; 
  } 
 } 
 } 
 //初始化调用 
 var page= new Paging(null,{ 
 nowNum: 1, 
 allNum: 10, 
 callback: function(nowNum,allNum){ 
  console.log('当前页:'+nowNum) 
  console.log('总页:'+allNum) 
 } 
 }); 
</script> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
jQuery使用方法
Feb 04 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
8 行 Node.js 代码实现代理服务器
Dec 05 #Javascript
浅谈Node.js:Buffer模块
Dec 05 #Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 #Javascript
详解jquery easyui之datagrid使用参考
Dec 05 #Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 #Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 #Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 #Javascript
You might like
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
解密效果
2006/06/23 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
解析Python编程中的包结构
2015/10/25 Python
python从入门到精通(DAY 3)
2015/12/20 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python实现flappy bird小游戏
2018/12/24 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
美国家居装饰店:Pier 1
2019/09/04 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
建筑工程自我鉴定
2013/10/18 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
小学安全教育材料
2014/02/17 职场文书
毕业证委托书范文
2014/09/26 职场文书
小学教研工作总结2015
2015/05/13 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
创业计划书之餐饮
2019/09/02 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
HDFS免重启挂载新磁盘
2022/04/06 Servers
分享几个实用的CSS代码块
2022/06/10 HTML / CSS