jQuery 캡슐화를 기반으로 한 페이지 매김 구성 요소

巴扎黑
풀어 주다: 2017-06-27 09:12:02
원래의
1499명이 탐색했습니다.

머리말:

페이징 효과를 구현해야 하는 프로젝트라서 jQuery 플러그인 라이브러리에서 찾아보았지만 원하는 효과를 찾을 수 없어 페이징 구성요소를 직접 캡슐화했습니다.

아이디어:

초기화 시 프로토타입을 기반으로 설정된 페이징 템플릿을 주로 기반으로 한 다음 동적 이벤트를 바인딩하여 DOM을 새로 고치는 페이징 효과를 얻습니다.

1.page.init.css

 1 @charset "utf=8"; 2 *{ 3     box-sizing: border-box; 4     padding: 0; 5     margin: 0; 6 } 7 .page{ 8     font-size: 13px; 9     text-align: right;10 }11 .page .page_to{12     display: inline-block;13     max-width: 250px;14 }15 .page .page_to li{16     display: inline-block;17     width: auto;18     height: auto;19     border: 1px solid #ddd;20     padding:5px 10px;21     border-left-width: 0;22     color: #323232;23     cursor: pointer;24 }25 .page .page_to li.page_hide{26     display: none;27 }28 .page .page_to li:hover{29     color: #32C2CD;30     background-color: #f4f4f4;31     border-color: #DDDDDD;32 }33 .page .page_to li:first-child{34     border-left-width: 1px;35 }36 .page .page_jump{37     display: inline-block;38     width: 180px;39 }40 .page .page_jump input.page_jump_input{41     width: 52px;42     height: 28px;43     text-align: center;44     text-decoration: none;45     background-color: #fff;46     border: 1px solid #ddd;47     margin:0 4px;48 }49 .page .page_jump input.page_jump_btn{50     display: inline-block;51     padding: 7px 20px;52     margin-left: 5px;53     font-size: 14px;54     font-weight: 400;55     line-height: 1.42857143;56     text-align: center;57     white-space: nowrap;58     vertical-align: middle;59     -ms-touch-action: manipulation;60     touch-action: manipulation;61     cursor: pointer;62     -webkit-user-select: none;63     -moz-user-select: none;64     -ms-user-select: none;65     user-select: none;66     border: 1px solid transparent;67     border-radius: 4px;68     background-color: #00BB9C;69     color: #FFFFFF;70     font-weight: bold;71 }
로그인 후 복사

2.pageInit.js

  1 /**  2  * Created: 2017/6/20.  3  * author:  Aaron  4  * address: 
  5  */  6 (function($,window,undefined){  7   8     var curPage='',  9     //跳转是否有值 10         jumpVal='', 11     //从DOM中重新获取数据总数/总页数 12         lists='', 13         totals='', 14     //是否返回值 15         isTrue=false; 16  17     var Page=function(opts){ 18         this.settings= $.extend({},Page.defaults,opts); 19         curPage=this.settings.initPage; 20         totals=this.settings.totalPages; 21         jumpVal=this.settings.inputVal; 22         this.init(); 23     }; 24  25     //默认配置 26     Page.defaults={ 27         container:'.page', 28         setPos:'body', 29         totalPages:null, 30         totalLists:null, 31         initPage:1, 32         inputVal:1, 33         callBack:null 34     }; 35  36     Page.prototype={ 37         init:function(){ 38             this.create(); 39         }, 40         create:function(){ 41             var _template='<div class="page">'+ 42                 '<span class="page_details">'+ 43                 '共<span class="page_num">'+this.settings.totalLists+'</span>条记录,'+ 44                 '第<span class="page_current">'+curPage+'</span>/'+ 45                 '<span class="page_size">'+this.settings.totalPages+'</span>页'+ 46                 '</span>'+ 47                 '<div class="page_to">'+ 48                 '<ul class="flex_parent">'+ 49                 '<li class="page_first flex_child">首页</li>'+ 50                 '<li class="page_pre page_hide flex_child">« 上一页</li>'+ 51                 '<li class="page_next flex_child">下一页 »</li>'+ 52                 '<li class="page_last flex_child">末页</li>'+ 53                 '</ul>'+ 54                 '</div>'+ 55                 '<div class="page_jump">'+ 56                 '<span>第:<input type="number" class="page_jump_input" value="&#39;+this.settings.inputVal+&#39;">页</span>'+ 57                 '<input type="button" class="page_jump_btn" value="Go">'+ 58                 '</div>'+ 59                 '</div>'; 60             $(this.settings.setPos).append(_template); 61             this.refreshDom(); 62             this.bindEvent(); 63         }, 64         bindEvent:function(){ 65             var _this=this; 66             //跳转首页 67             $(this.settings.container).on("click",".page_first",function(){ 68  69                 lists=$(_this.settings.container).find(".page_num").text(); 70                 totals=$(_this.settings.container).find(".page_size").text(); 71  72                 if($.isFunction(_this.settings.callBack)){ 73                     curPage=1; 74                     isTrue=_this.settings.callBack(1); 75                     if(isTrue){ 76                         _this.refreshDom(); 77                         $(_this.settings.container).find(".page_current").text(1); 78                         $(_this.settings.container).find(".page_jump_input").val(curPage); 79                     } 80                 } 81             }); 82             //跳转上一页 83             $(this.settings.container).on("click",".page_pre",function(){ 84  85                 lists=$(_this.settings.container).find(".page_num").text(); 86                 totals=$(_this.settings.container).find(".page_size").text(); 87  88                 if($.isFunction(_this.settings.callBack)){ 89                     if(curPage>1){ 90                         curPage=curPage-1; 91                         isTrue=_this.settings.callBack(curPage); 92                         if(isTrue){ 93                             _this.refreshDom(); 94                             $(_this.settings.container).find(".page_current").text(curPage); 95                             $(_this.settings.container).find(".page_jump_input").val(curPage); 96                         } 97                     } 98                 } 99             });100             //跳转下一页101             $(this.settings.container).on("click",".page_next",function(){102 103                 lists=$(_this.settings.container).find(".page_num").text();104                 totals=$(_this.settings.container).find(".page_size").text();105 106 107                 if($.isFunction(_this.settings.callBack)){108                     if(curPage<totals){109                         curPage=curPage+1;110                         isTrue=_this.settings.callBack(curPage);111                         if(isTrue){112                             _this.refreshDom();113                             $(_this.settings.container).find(".page_current").text(curPage);114                             $(_this.settings.container).find(".page_jump_input").val(curPage);115                         }116                     }117                 }118             });119             //跳转末页120             $(this.settings.container).on("click",".page_last",function(){121 122                 lists=$(_this.settings.container).find(".page_num").text();123                 totals=$(_this.settings.container).find(".page_size").text();124 125                 if($.isFunction(_this.settings.callBack)){126                     curPage=totals;127                     isTrue=_this.settings.callBack(curPage);128                     if(isTrue){129                         _this.refreshDom();130                         $(_this.settings.container).find(".page_current").text(totals);131                         $(_this.settings.container).find(".page_jump_input").val(curPage);132                     }133                 }134             });135             //Go跳转136             $(this.settings.container).on("click",".page_jump_btn",function(){137 138                 lists=$(_this.settings.container).find(".page_num").text();139                 totals=$(_this.settings.container).find(".page_size").text();140 141                 if($.isFunction(_this.settings.callBack)){142                     jumpVal=Number($(_this.settings.container).find("input.page_jump_input").val());143                     console.log(&#39;跳转的页数:&#39;+jumpVal+&#39;;跳转之前的页数:&#39;+curPage);144                     if(jumpVal>=1 && jumpVal <=totals){145                         curPage=jumpVal;146                         isTrue=_this.settings.callBack(curPage);147                         if(isTrue){148                             _this.refreshDom();149                             $(_this.settings.container).find(".page_current").text(curPage);150                         }151                     }else{152                         jumpVal=curPage;153                     }154                 }155             });156         },157         refreshDom:function(){158             $(this.settings.container).find("li.flex_child").removeClass("page_hide");159             if(Number(totals)==1){160                 $(this.settings.container).find(".page_pre").addClass("page_hide");161                 $(this.settings.container).find(".page_next").addClass("page_hide");162             }163             else if(Number(totals)==2){164                 if(Number(curPage)==1){165                     $(this.settings.container).find(".page_pre").addClass("page_hide");166                 }else{167                     $(this.settings.container).find(".page_next").addClass("page_hide");168                 }169             }170             else if(Number(curPage)==1 && Number(totals)>2){171                 $(this.settings.container).find(".page_pre").addClass("page_hide");172             }173             else if(Number(curPage)==Number(totals) && Number(totals)>2){174                 $(this.settings.container).find(".page_next").addClass("page_hide");175             }176         }177     };178 179     var pageInit=function(opts){180         return new Page(opts);181     };182 183     window.pageInit= $.pageInit=pageInit;184 185 })(jQuery,window,undefined);
로그인 후 복사

3. 구성 요소 호출

Paging 구성 요소 초기화는 window.pageInit= $.pageInit=pageInit을 통해 완료할 수 있습니다.

노출되는 인터페이스는 다음과 같습니다.

1.container: DOM 컨테이너, default.page

2.setPos: DOM에 배치된 HTML 위치, 기본 body

3.totalPages: 기본 페이지 수, 기본 null

4.totalLists: 기본 총 데이터 개수, 필수, 기본값 null

5.initPage: 현재 페이지, 기본 첫 페이지

6.inputVal: 점프 페이지, 기본 첫 페이지

7.callBack : 실행할 콜백 함수 , 필수, 기본값 null

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="UTF-8"> 5     <title>基于jQuery封装的分页组件</title> 6     <link rel="stylesheet" href="css/page.init.css?1.1.11"> 7 </head> 8 <body> 9 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js?1.1.11"></script>10 <script src="js/pageInit.js?1.1.11"></script>11 <script>12     $.pageInit(13             {14                 container:'.page',//容器:默认page15                 //setPos:'body',//放置位置:默认body16                 totalPages:10,//总页数:必填17                 totalLists:100,//数据总数:必填18                 initPage:1,//初始页码:默认119                 inputVal:1,//设置跳转的input值:默认120                 //要执行的函数:默认null,必须为fn且返回true则可执行分页,false则不执行21                 callBack:function(n){22                     var flag=true;23                     console.log(n);24                     return flag;25                 }26             }27     );28 </script>29 </body>30 </html>
로그인 후 복사

효과:

콜백 인터페이스를 통해 실행해야 하는 함수를 추가하면 true가 필요한 경우에만 동적 DOM 렌더링이 실행됩니다.

위 내용은 jQuery 캡슐화를 기반으로 한 페이지 매김 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿