ネイティブ JS でオブジェクト指向のページングコンポーネントを作成する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ネイティブ JS でオブジェクト指向のページングコンポーネントを作成する

高洛峰

Jan 04, 2017 am 09:11 AM

この記事の例では、参考のためにオブジェクト指向ページングコンポーネントの具体的な実装コードを共有します。具体的な内容は次のとおりです

テキスト表現が限られているため、コードに直接進みます

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

ログイン後にコピー

以上がこの記事の全内容です。学習が皆様のお役に立つことを願っております。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。

ネイティブ JS でのオブジェクト指向ページングコンポーネントの作成に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7724

Java チュートリアル

1643

CakePHP チュートリアル

1396

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。