原生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 相关文章推荐
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
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 定界符格式引起的错误
2011/05/24 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
创先争优个人承诺书
2014/08/30 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers