这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 js 编写基于面向对象的分页组件, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码,供大家参考,具体内容如下
文字表达有限,直接上代码了
- <!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>
来源: http://www.phperz.com/article/17/0525/329859.html