jQuery实现翻页插件

最新推荐文章于 2022-12-04 10:54:46 发布

jacoox

最新推荐文章于 2022-12-04 10:54:46 发布

阅读量2.3k

点赞数

文章标签： css jquery

本文链接：https://blog.csdn.net/jacoox/article/details/80086180

版权

推荐一个自己的博客：JS -- 手动实现数组原生方法

使用编辑器：vs code

主要用到的技术：css3 + jQuery

欢迎加QQ：1759668379一起讨论

html:这次html里面也没写什么东西，主要实在js文件中利用for循环动态生成结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>翻页插件</title>
    <link rel="stylesheet" href="fycj.css">
</head>
<body>
    <div class="page"></div>
    <script src="jquery.js"></script>
    <script src="fycj.js"></script>
    <script>
        $('.page').create({
            pageCount:20,//总页数
            current:5,//当前页码
            backFn:function(p){}//回调函数
        })
    </script>
</body>
</html>

css文件：

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.page{
    width: 500px;
    height: 200px;
    margin: 100px auto;
}
.page a,
.page .noPre,
.current{
    display: inline-block;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #ddd;
    color: #428bca;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 5px;
}
.page a:hover{
    border:1px solid #428bca;
}
.page .noPre{
    background-color: #ddd;
    color: #eee;

}
.page .current{
    background-color: #428bca;
    color:#eee;
}

js文件：内容看注释好了

(function(){
    //入口函数
    function init(dom,arg){
        //判断传入的页码是否符合标准
        if(arg.current <= arg.pageCount){
            fillhtml(dom,arg);
            bindEvent(dom,arg);
        }else{
            alert('请输入正确的页码')
        }
    }
    //动态构建网页内容
    function fillhtml(dom,arg){
        //清空页面布局
        dom.empty();
        //大体分三部分：上一页，中间页码，下一页
        //上一页
        //上一页又分为可点击与不可点击两种
        if(arg.current > 1){
            dom.append('<a class="prePage" href="#">上一页</a>');
        }else {
            dom.remove('.prePage');
            dom.append('<span class="noPre">上一页</span>');
        }
        //中间页码
        //中间页码又分为中间可显示的5个页码与...与两端的页码
        //第一页
        if(arg.current != 1 && arg.current > 3){
            dom.append('<a class="tcdNum" href="#">1</a>');
        }
        //判断当前页面是否距离第一页大于3，是则需要...
        if(arg.current-3 > 1){
            dom.append('<span>...</span>');
        }
        //判断中间需要显示的页码
        var start = arg.current-2;
        var end = arg.current+2;
        for(;start <= end;start++){
            //判断开始页面是否大于1且是否小于最大页码
            if(start >= 1 && start <= arg.pageCount){
                //判断是否是选中页面
                if(start == arg.current){
                    dom.append('<span class="current">'+start+'</span>');
                } else {
                    dom.append('<a class="tcdNum" href="#">'+start+'</a>');
                }
            }
        }
        //后置的...
        if(arg.current+3 < arg.pageCount){
            dom.append('<span>...</span>');
        }
        //最后一页
        if(arg.current != arg.pageCount && arg.current < arg.pageCount-2){
            dom.append('<a class="tcdNum" href="#">'+arg.pageCount+'</a>');
        }
        //下一页
        //下一页与上一页类似
        if(arg.current < arg.pageCount){
            dom.append('<a class="nextPage" href="#">下一页</a>');
        }else {
            dom.remove('.prePage');
            dom.append('<span class="noPre">下一页</span>')
        }
    }
    //处理点击事件
    function bindEvent(dom,arg){
        //分为点击上一页，点击页码与点击下一页
        //点击上一页
        //获得当前页面，-1 然后调用fillhtml重绘页面
        dom.on('click','.prePage',function(){
            var cur=parseInt(dom.children('.current').text());
            fillhtml(dom,{'current':cur-1,'pageCount':arg.pageCount});
            if(typeof arg.backFn=='function'){
                arg.backFn(cur-1);
            }
        })
        //点击页码
        //获得点击页码，调用fillhtml重绘页面
        dom.on('click','.tcdNum',function(){
            var cur=parseInt($(this).text());
            fillhtml(dom,{'current':cur,'pageCount':arg.pageCount});
            if(typeof arg.backFn=='function'){
                arg.backFn(cur);
            }
        })
        //点击下一页
        //获得当前页面，+1 然后调用fillhtml重绘页面
        dom.on('click','.nextPage',function(){
            var cur=parseInt(dom.children('.current').text());
            fillhtml(dom,{'current':cur+1,'pageCount':arg.pageCount});
            if(typeof arg.backFn=='function'){
                arg.backFn(cur+1);
            }
        })
    }
    //扩展jquery封装函数
    $.fn.create=function(option){
// 
//      extend函数：当调用create时，如果传了参数option
//      则使用传入的参数，否则使用预定义的参数
// 
        var arg=$.extend({
            pageCount:10,
            current:2,
            backFn:function(){}
        },option)
        init(this,arg);
    }
})(jQuery);

效果图：

欢迎留言批评指正。

(完)

jacoox

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现翻页插件

推荐一个自己的博客：JS -- 手动实现数组原生方法使用编辑器：vs code主要用到的技术：css3 + jQuery欢迎加QQ：1759668379一起讨论html:这次html里面也没写什么东西，主要实在js文件中利用for循环动态生成结构。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;...
复制链接

扫一扫