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

站长资源 2024/11/28 佚名

78 1538 78

DDR爱好者之家 Design By 杰米

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

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

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,分页组件

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

详解Vue.js——60分钟组件快速入门（上篇）

8 行 Node.js 代码实现代理服务器

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接