分页器-jquer插件

最新推荐文章于 2024-08-10 07:41:08 发布

郑布斯的个人博客

最新推荐文章于 2024-08-10 07:41:08 发布

阅读量551

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zhengbusi/article/details/81219776

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

废话就不说了先看效果：

1:html:需要一个class=“pageBox”的容器

<body>
    <div class="pageBox"></div>
</body>

2.css

.pageBox{
            font-size:0;
            padding: 1px;
            display: inline-block;
            height: 40px;
            background: #fff;
        }
    .pageBox  input{
            padding: 0px;
            margin: 0px;
            outline:none;
            height: 40px;
            width: 40px;
            vertical-align:top;
        }
    .pageNumDiv{
            display: inline-block;
            overflow: hidden;
            position: relative;
        }
    .paginationWrap{
            display:inline-block;
            height: 40px;
            padding: 0px;
            margin: 0px;
        
        }
    .paginationWrap li{
            list-style: none;
            height: 38px;
            width: 38px;
            text-align: center;
            line-height: 40px;
            margin: 1px;
            background: #dcdcdc;
            font-size: 14px;
            float: left;
        }
    .pageActive{
            background: blue !important;
            color: #fff;
        }

3.调用

<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/paging.js"></script>
<script>

    $(".pageBox").paging({
        totaPages:20,//设置总页数
        initPageNo:1,//设置初始页
        slideSpeed:600,//移动速度
        callback:function(page){
            console.log(page); //回调函数
        }
    });
</script>

4.paging.js

(function($,window,document){
    //定义构造函数
    function Paging(el,options){
        this.el = el;//对象传递
        this.options = {
            pageNo : options.initPageNo || 1,//初始化页码
            totaPages : options.totaPages || 1,//总页数
            slideSpeed : options.slideSpeed || 0,//移动速度
            callback : options.callback || function() {}//回调函数
        };
        this.init();
    }

    //给实例对象添加公共属性和方法
    Paging.prototype = {
       constructor : Paging,
       init : function (){
           this.createDom();    //创建dom对象
           this.bindEvents();   //绑定事件
       },
       createDom : function(){
           var that  = this,
           ulDom = '',
           jumpDom = '',
           content = '',
           liWidth = 40,    //li的宽度
           totaPages = that.options.totaPages,//总页数
           wrapLength = 0 ;
           totaPages > 5 ? wrapLength = 5*liWidth : wrapLength = totaPages*liWidth;
           for (var i = 1; i <= totaPages;i++){
               i !=1 ? ulDom +='<li >'+i+'</li>' : ulDom +='<li class="pageActive">'+i+'</li>';
            }
            content = '<input id="firstPage" type="button" value="1"><input id="upPage" type="button" value="<">'+
                        ' <div class="pageNumDiv" style="width:'+wrapLength+'px;"><ul class="paginationWrap" style="width:'+totaPages*40+'px;transition:all '+that.options.slideSpeed+'ms">'+ulDom+' </ul></div>'+
                        ' <input id="downPage" type="button" value=">"><input id="lastPage" type="button" value="'+totaPages+'">';
            that.el.html(content);
       },
       bindEvents : function (){
            var that = this,
                paginationWrap = $('.paginationWrap'),//ul
                lis = paginationWrap.children(),//获取ul下的li集合
                liWidth = lis[0].offsetWidth+2,//li的宽度
                totaPages = that.options.totaPages,//总页数
                pageIndex = that.options.pageNo, // 当前选择的页码
                distance = 0, // ul移动距离
                firstPage = $('#firstPage'),//首页
                upPage = $('#upPage'),//上一页
                downPage = $('#downPage'),//下一页
                lastPage = $('#lastPage');//最后一页
                

            lis.on('click',function(){
                handles($(this).index()+1);
            })

            downPage.on('click',function(){
                pageIndex++;
                if(pageIndex > lis.length) pageIndex = lis.length;
                handles(pageIndex);
            });    

            upPage.on('click',function(){
                pageIndex--;
                if(pageIndex <= 0)pageIndex = 0;
                handles(pageIndex);
            });

            firstPage.on('click',function(){
                pageIndex = 1;
                handles(pageIndex);
            });

            lastPage.on('click',function(){
                pageIndex = totaPages;
                handles(pageIndex);
            });
            function handles(pageIndex){
                lis.removeClass('pageActive');
                lis.eq(pageIndex -1).addClass('pageActive');
                if(pageIndex >= 3){
                    distance = (pageIndex-3)*liWidth;  
                }
                if(pageIndex == 1 || pageIndex == 2) distance = 0;
                pageIndex == 1? upPage.attr('disabled',true) : upPage.attr('disabled',false);
                pageIndex == totaPages ? downPage.attr('disabled',true) : downPage.attr('disabled',false);
                paginationWrap.css("transform","translateX(-"+distance+"px)");
                that.options.callback(pageIndex);
            }
            handles(that.options.pageNo);
       }  
    }

    $.fn.paging = function(options) { //为jquery对象绑定方法
        return new Paging($(this), options);
    }
})(jQuery, window, document)