本文實(shí)例為大家分享了一個(gè)基于面向?qū)ο蟮姆猪摻M件的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
文字表達(dá)有限，直接上代碼了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一個(gè)基于面向?qū)ο蟮姆猪摻M件</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={}; //默認(rèn)設(shè)置 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); }, /*觸發(fā)自定義事件*/ 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結(jié)構(gòu)*/ renderUI: function(){ this.Box= document.createElement('div'); this.Box.className= 'Paging'; var nowNum= this.config.nowNum; var allNum= this.config.allNum; //當(dāng)前頁大于或等于4，第一頁才能隱藏，總數(shù)大于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); }; //當(dāng)前頁只要不是第一頁就顯示上一頁 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頁時(shí) 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); //對當(dāng)前頁為前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; } }/*對當(dāng)前頁為后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為標(biāo)準(zhǔn)，或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]; } } } //初始化調(diào)用 var page= new Paging(null,{ nowNum: 1, allNum: 10, callback: function(nowNum,allNum){ console.log('當(dāng)前頁：'+nowNum) console.log('總頁：'+allNum) } }); </script> </html> 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
