用jQuery写的一个翻页，并封装为插件，

Posted 2021-01-12 bacydm

用jQuery写的一个翻页，并封装为插件，

 1 *{
 2     margin:0;
 3     padding: 0;
 4     list-style: none;
 5     text-decoration: none;
 6 }
 7 .page{
 8     width:500px;
 9     margin:100px auto;
10     color: #ccc;
11 }
12 .page a{
13     display: inline-block;
14     color: #428bca;
15     height: 25px;
16     line-height: 25px;
17     padding: 0 10px;
18     border: 1px solid #ddd;
19     margin: 0 2px;
20     border-radius: 4px;
21     vertical-align: middle;
22 }
23 .page a:hover{
24     border: 1px solid #428bca;
25 }
26 .page .current{
27     display: inline-block;
28     height: 25px;
29     line-height: 25px;
30     padding: 0 10px;
31     margin: 0 2px;
32     color: #fff;
33     background-color: #428bca;
34     border: 1px solid #428bca;
35     border-radius: 4px;
36     vertical-align: middle;
37 }
38 .page .disabled{
39     display: inline-block;
40     height: 25px;
41     line-height: 25px;
42     padding: 0 10px;
43     margin: 0 2px;
44     color: #bfbfbf;
45     background: #f2f2f2;
46     border: 1px solid #bfbfbf;
47     border-radius: 4px;
48     vertical-align: middle;
49 }

css

 

css自己随便写一下就行，

 1 (function($){
 2     function init(dom, args){
 3         if (args.pageCount >= args.current){
 4             createPage(dom, args);
 5             bindEvent(dom, args);
 6         }else{
 7             alert("输入页码大于页数！")
 8         }
 9     }
10     function createPage(dom,args){        
11         dom.empty();
12         if(args.current != 1){
13             dom.append(‘<a href = "#" class="prevPage">上一页</a>‘);
14         }else{
15             dom.append(‘<span class="disabled">上一页</span>‘);
16         }
17 
18         if (args.current >= 4){
19             dom.append(‘<a href = "#" class="tcdNumber">‘ + 1 + ‘</a>‘);
20         }
21         if (args.current >= 5){
22             dom.append(‘<span>...</span>‘);
23         }
24         for (var i = args.current-2; i < args.current + 3; i ++){
25             if (i > 0 && i <= args.pageCount){
26                 if(i == args.current){
27                     dom.append(‘<span class="current">‘ + args.current + ‘</span>‘);
28                 }else{
29                     dom.append(‘<a href = "#" class="tcdNumber">‘+ i +‘</a>‘);
30                 }
31             }
32         }
33         if (args.current <= args.pageCount - 5){
34             dom.append(‘<span>...</span>‘);
35         }
36         if (args.current <= args.pageCount - 4){
37             dom.append(‘<a href = "#" class="tcdNumber">‘ + args.pageCount + ‘</a>‘);
38         }
39         if(args.current != args.pageCount){
40             dom.append(‘<a href = "#" class="nextPage">下一页</a>‘);
41         }else{
42             dom.append(‘<span class="disabled">下一页</span>‘);
43         }
44     }
45     function bindEvent(dom,args){
46         dom.on(‘click‘,‘.prevPage‘,function(){
47             args.current--;
48             createPage(dom,args);
49             args.backFunction(args)
50         })
51         dom.on(‘click‘,‘.tcdNumber‘,function(){
52             args.current = parseInt($(this).text());
53             createPage(dom,args);
54             args.backFunction(args)
55         })
56         dom.on(‘click‘,‘.nextPage‘,function(){
57             args.current++;
58             createPage(dom,args);
59             args.backFunction(args)
60         })
61     }
62     $.fn.createPage = function(options){
63         var args = $.extend({
64             pageCount : 1,
65             current : 1,
66             backFunction : function(){}
67         },options);
68         init(this,args);
69     }
70 }(jQuery))  

 1  <div class="page"></div>
 2     <script>
 3         $(".page").createPage({
 4             pageCount : 15,
 5             current : 5,
 6             backFunction : function(arr){
 7                 console.log(arr.current)
 8             }
 9         })
10     </script>