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

2019-11-19 18:39:45

字体：大中小

来源：转载

供稿：网友

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

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

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

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

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

下一篇：8 行 Node.js 代码实现代理服务器