Heim > Artikel > Web-Frontend > Schreiben Sie objektorientierte Paging-Komponenten in nativem JS

Schreiben Sie objektorientierte Paging-Komponenten in nativem JS

高洛峰Original: 2017-01-04 09:11:221073Durchsuche

Das Beispiel in diesem Artikel teilt den spezifischen Implementierungscode einer objektorientierten Paging-Komponente als Referenz. Der spezifische Inhalt ist wie folgt

Der Textausdruck ist begrenzt, sodass wir den Code direkt eingeben können

<!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] === &#39;undefined&#39;){ 
  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(&#39;div&#39;); 
  this.Box.className= &#39;Paging&#39;; 
  var nowNum= this.config.nowNum; 
  var allNum= this.config.allNum; 
  //当前页大于或等于4，第一页才能隐藏，总数大于5才能显示首页 
  if (nowNum >=4 && allNum >=6) { 
  var pageA= document.createElement(&#39;a&#39;); 
  pageA.className= &#39;Paging-item Paging-item-start&#39; 
  pageA.href=&#39;#1&#39;; 
  pageA.innerHTML= &#39;首页&#39;; 
  this.Box.appendChild(pageA); 
  }; 
  //当前页只要不是第一页就显示上一页 
  if(nowNum>=2){ 
  var pageA= document.createElement(&#39;a&#39;); 
  pageA.className= &#39;Paging-item Paging-item-pre&#39; 
  pageA.href=&#39;#&#39;+ (nowNum-1); 
  pageA.innerHTML= &#39;上一页&#39;; 
  this.Box.appendChild(pageA); 
  } 
   
  //只有5页时 
  if(allNum<=5){ 
    
  for(var i=1;i<=allNum;i++){ 
   var pageA= document.createElement(&#39;a&#39;); 
   pageA.className= &#39;Paging-item&#39; 
   pageA.href= &#39;#&#39;+ i; 
   if(nowNum==i){ 
   pageA.className= &#39;Paging-item Paging-item-active&#39; 
   pageA.innerHTML=i; 
   }else{ 
   // pageA.innerHTML=&#39;[&#39;+ i +&#39;]&#39;; 
   pageA.innerHTML=i; 
   }   
   this.Box.appendChild(pageA); 
  } 
    
  }else{ 
  for(var i=1;i<=5;i++){ 
   var pageA= document.createElement(&#39;a&#39;); 
   pageA.className= &#39;Paging-item&#39; 
   pageA.href= &#39;#&#39;+ (nowNum-3+i); 
   //对当前页为前2页的处理 
   if(nowNum === 1 || nowNum === 2){ 
   pageA.href= &#39;#&#39;+ i; 
   if(nowNum === i){ 
    pageA.className= &#39;Paging-item Paging-item-active&#39; 
    pageA.innerHTML= i; 
   }else{ 
    // pageA.innerHTML= &#39;[&#39;+i+&#39;]&#39;; 
    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= &#39;#&#39;+ ((allNum-5)+i); 
   if((allNum-nowNum) ===0 && i===5){ 
    pageA.className= &#39;Paging-item Paging-item-active&#39; 
    pageA.innerHTML=((allNum-5)+i); 
   }else if((allNum-nowNum) ===1 && i===4){ 
    pageA.className= &#39;Paging-item Paging-item-active&#39; 
    pageA.innerHTML=((allNum-5)+i); 
   }else{ 
    // pageA.innerHTML= &#39;[&#39;+ ((allNum-5)+i) +&#39;]&#39; 
    pageA.innerHTML= ((allNum-5)+i) 
   } 
   }else{ 
   if(nowNum === (nowNum-3+i)){ 
    pageA.className= &#39;Paging-item Paging-item-active&#39; 
    pageA.innerHTML= (nowNum-3+i); 
   }else{ 
    // pageA.innerHTML= &#39;[&#39;+ (nowNum-3+i) +&#39;]&#39; 
    pageA.innerHTML= (nowNum-3+i) 
   } 
   } 
    
   this.Box.appendChild(pageA); 
  } 
  } 
  
  if((allNum-nowNum) >=1){ 
  var pageA= document.createElement(&#39;a&#39;); 
  pageA.className= &#39;Paging-item Paging-item-next&#39; 
  pageA.href=&#39;#&#39;+ (nowNum+1); 
  pageA.innerHTML= &#39;下一页&#39;; 
  this.Box.appendChild(pageA); 
  } 
  //选择7为标准，或7以下才能显示 
  if((allNum-nowNum) >= 3 && allNum >= 6){ 
  var pageA= document.createElement(&#39;a&#39;); 
  pageA.className= &#39;Paging-item Paging-item-end&#39; 
  pageA.href=&#39;#&#39;+allNum; 
  pageA.innerHTML= &#39;尾页&#39;; 
  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(&#39;href&#39;) === &#39;string&#39;){ 
   var nowNum= parseInt(target.getAttribute(&#39;href&#39;).substring(1)); 
   // console.log(nowNum); 
   self.Box.innerHTML= &#39;&#39;; 
   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(&#39;当前页：&#39;+nowNum) 
  console.log(&#39;总页：&#39;+allNum) 
 } 
 }); 
</script> 
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zum Schreiben objektorientierter Paging-Komponenten basierend auf nativem JS finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Objektorientierte Javascript-SchnittstelleNächster Artikel：Objektorientierte Javascript-Schnittstelle

In Verbindung stehende Artikel

Mehr sehen