分页插件使用的dome

最新推荐文章于 2025-08-19 08:41:01 发布

weixin_30895603

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/9608kai/p/9055602.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="viewport"
          content="width=device-width,  initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,  user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>simplePaging－简洁易用的分页插件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/1.42857143 'Microsoft YaHei', '微软雅黑', '宋体';
            color: #333;
            background-color: #fff;
            min-width: 1220px;
            max-width: 1920px;
            margin: 0 auto;
        }

        .instructions {
            float: right;
            margin: 20px;
            width: 700px;
        }

        .instructions table {
            width: 100%;
        }

        .instructions table th,
        .instructions table td {
            width: 15%;
            text-align: center;
            border: 1px solid #ccc;
        }

        .instructions table th:last-child,
        .instructions table td:last-child {
            width: 55%;
            padding-left: 5px;
            text-align: left;
        }

        .part {
            margin: 20px;
        }

        .part p {
            padding-left: 2px;
        }
        .red{
            color: red;
        }
        .page{
            height: 30px;
            line-height: 30px;
        }
    </style>
    <link rel="stylesheet" href="css/simplePaging.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/simplePaging.js"></script>
</head>
<body>
<!--文档说明 开始-->
<!--
<div class="instructions">
    <strong>文档说明：</strong>
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <th>参数名</th>
            <th>参数类型</th>
            <th>可选参数</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>allPage</td>
            <td>number</td>
            <td>自定义数字</td>
            <td>默认值：12。<span class="red">总页数</span>：页码器总共多少页。</td>
        </tr>
        <tr>
            <td>showPage</td>
            <td>number</td>
            <td>自定义数字</td>
            <td>默认值：5。<span class="red">显示页数</span>：页码器显示几页。</td>
        </tr>
        <tr>
            <td>startPage</td>
            <td>number</td>
            <td>自定义数字</td>
            <td>默认值：1。<span class="red">首页页码数字。</span></td>
        </tr>
        <tr>
            <td>initPage</td>
            <td>number</td>
            <td>自定义数字</td>
            <td>默认值：1。<span class="red">加载完毕自动跳转到第n页</span>：此值小于<span class="red">startPage</span>则跳转首页，反之跳转尾页。</td>
        </tr>
        <tr>
            <td>initPageClick</td>
            <td>boolean</td>
            <td>true或false</td>
            <td>默认值：true(回调)。<span class="red">每次页面加载完毕后，是否触发initPage页的绑定事件</span>,false不回调。</td>
        </tr>
        <tr>
            <td>first</td>
            <td>string</td>
            <td>自定义字符串</td>
            <td>默认值："首页"。<span class="red">首页显示字符</span>。</td>
        </tr>
        <tr>
            <td>last</td>
            <td>string</td>
            <td>自定义字符串</td>
            <td>默认值："尾页"。<span class="red">尾页显示字符</span>。</td>
        </tr>
        <tr>
            <td>prev</td>
            <td>string</td>
            <td>自定义字符串</td>
            <td>默认值："«"。<span class="red">上一页显示字符</span>。</td>
        </tr>
        <tr>
            <td>next</td>
            <td>string</td>
            <td>自定义字符串</td>
            <td>默认值："»"。<span class="red">下一页显示字符</span>。</td>
        </tr>
        <tr>
            <td>showTurnTo</td>
            <td>boolean</td>
            <td>true或false</td>
            <td>默认值：false(不显示)。<span class="red">是否显示“跳转”项</span>，true时显示。为true时，页码输入框输入完毕，按下<span class="red">回车键即可立即执行跳转</span>。输入页码小于<span class="red">startPage</span>跳转首页，反之跳至尾页。</td>
        </tr>
        <tr>
            <td>animateType</td>
            <td>string</td>
            <td>
                "animation"<br/>
                "jumpy"<br/>
                "fast"<br/>
                "normal"<br/>
                "slow"<br/>
                "verySlow"
            </td>
            <td>
                默认值："animation"。<span class="red">动画过渡模式</span>。<br/>
                立即，对应animationTime=0<br/>
                100ms，对应animationTime=100<br/>
                200ms，对应animationTime=200<br/>
                400ms，对应animationTime=400<br/>
                800ms，对应animationTime=800<br/>
            </td>
        </tr>
        <tr>
            <td>animationTime</td>
            <td>number</td>
            <td>自定义数字</td>
            <td>默认值：300。<span class="red">仅为animateType为animation时生效</span>，设置<span class="red">动画过渡时间(ms)</span>。</td>
        </tr>
        <tr>
            <td>callBack</td>
            <td>function</td>
            <td>自定义方法</td>
            <td>默认值：打印页码。用于<span class="red">回调函数扩展方法</span>。</td>
        </tr>
    </table>
</div>
<!–文档说明 结束–>


<!–demo 开始–>

<!–默认–>
<div class="part part1">
    <p>默认:</p>
    <div class="simplePaging"></div>
    <script>
        $(".simplePaging").simplePaging();
    </script>
</div>


<!–总页数88，显示页数8–>
<div class="part part2">
    <p>总页数88，显示页数8:</p>
    <div class="simplePaging2"></div>
    <script>
        $(".simplePaging2").simplePaging({
            allPage: 88,//总页数
            showPage: 8//显示页数
        });
    </script>
</div>


<!–第一页数字6，初始化跳转到8–>
<div class="part part3">
    <p>第一页数字6，初始化跳转到8:</p>
    <div class="simplePaging3"></div>
    <script>
        $(".simplePaging3").simplePaging({
            allPage: 88,//总页数
            showPage: 9,//显示页数
            startPage: 6,//第一页页码数字
            initPage: 8//加载完毕自动跳转到第n页
        });
    </script>
</div>


<!–animationTime设置为50,回调显示页码–>
<div class="part part4">
    <p>animationTime设置为50，回调显示页码:</p>
    <div class="simplePaging4"></div>
    <div class="page simplePaging4PageNum"></div>
    <script>
        $(".simplePaging4").simplePaging({
            allPage: 88,//总页数
            showPage: 9,//显示页数
            startPage: 1,//第一页页码数字
            initPage: 5,//加载完毕自动跳转到第n页
            animateType: "animation",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
            animationTime: 50,//animateType为animation时，动画过渡时间(ms)
            callBack: function (num) {
                $(".simplePaging4PageNum").text(num)
            }
        });
    </script>
</div>


<!–animateType为"jumpy"–>
<div class="part part5">
    <p>animateType为"jumpy":</p>
    <div class="simplePaging5"></div>
    <div class="page simplePaging5PageNum"></div>
    <script>
        $(".simplePaging5").simplePaging({
            allPage: 88,//总页数
            showPage: 9,//显示页数
            animateType: "jumpy",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
            callBack: function (num) {
                $(".simplePaging5PageNum").text(num)
            }
        });
    </script>
</div>


<!–animateType为"verySlow"–>
<div class="part part6">
    <p>animateType为"verySlow":</p>
    <div class="simplePaging6"></div>
    <div class="page simplePaging6PageNum"></div>
    <script>
        $(".simplePaging6").simplePaging({
            allPage: 88,//总页数
            showPage: 9,//显示页数
            startPage: 6,//第一页页码数字
            initPage: 18,//加载完毕自动跳转到第n页
            first: "首页",//首页显示字符
            last: "尾页",//尾页显示字符
            prev: "«",//上一页显示字符
            next: "»",//下一页显示字符
            animateType: "verySlow",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
            callBack: function (num) {
                $(".simplePaging6PageNum").append(num+"    ")
            }
        });
    </script>
</div>
-->

<!--显示跳转按钮-->
<div class="part part7">
    <p>显示跳转按钮:</p>
    <div class="simplePaging7"></div>
    <div class="page simplePaging7PageNum"></div>
    <script>
        $(".simplePaging7").simplePaging({
            allPage: 10,//总页数
            showPage: 5,//显示页数
            startPage: 1,//第一页页码数字
            initPage: 1,//加载完毕自动跳转到第n页
            showTurnTo: true,//是否显示跳转按钮，false不显示，true显示
            animateType: "normal",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
            animationTime: 300,//animateType为animation时，动画过渡时间(ms)
            callBack: function (num) {
                $.ajax({
                    type:'GET',
                    //发送请求的地址以及传输的数据
                    url:'https://www.apiopen.top/satinCommentApi?id=27610708&page='+num+'',
                    //服务器返回的数据类型
                    dataType:'json',
                    success:function(data){
                       var a=data.data.normal.list;
                        console.log(a)
                        $(".simplePaging7PageNum").empty();
                       for(var i=0;i< a.length;i++){
                           $(".simplePaging7PageNum").append(a[i].content+'<br/>')
                       }
                    },
                    error:function(jqXHR){
                        alert(0)
                    }
                });


            }
        });
    </script>
</div>

<!--显示跳转按钮(页面加载完毕不回调callBack)-->
<!--<div class="part part8">
    <p>显示跳转按钮(每次页面第一次加载完毕不回调callBack):</p>
    <div class="simplePaging8"></div>
    <div class="page simplePaging8PageNum"></div>
    <script>
        $(".simplePaging8").simplePaging({
            allPage: 88,//总页数
            showPage: 9,//显示页数
            startPage: 1,//第一页页码数字
            initPage: 1,//加载完毕自动跳转到第n页
            initPageClick:false,//每次页面加载完毕后，是否触发initPage页的绑定事件
            showTurnTo: true,//是否显示跳转按钮，false不显示，true显示
            animateType: "normal",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
            animationTime: 300,//animateType为animation时，动画过渡时间(ms)
            callBack: function (num) {
                $(".simplePaging8PageNum").append(num+"    ")
            }
        });
    </script>
</div>-->



<!--demo 结束-->
</body>
</html>

　　css

.spPage ul li,
.spActiveBg,
.spPrev,
.spFirst,
.spLast,
.spNext,
.spTurnTo input,
.spTurnTo .btn {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ddd;
    font-size: 12px;
    text-align: center;
    vertical-align: top;

    *display: block;
    *float: left;
}

.spPage ul li,
.spActiveBg,
.spPrev,
.spFirst,
.spLast,
.spNext,
.spTurnTo .btn {
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
}

.spPage ul li:active,
.spActiveBg:active,
.spPrev:active,
.spFirst:active,
.spLast:active,
.spNext:active,
.spTurnTo .btn:active {
    color: #f90;
}

.spPrev,
.spNext {
    font-size: 16px;

}

.spPage {
    display: inline-block;
    font-size: 0;
    height: 30px;
    vertical-align: top;
    *display: block;
    *float: left;
}

.spTurnTo {
    position: relative;
    display: inline-block;
    font-size: 0;
    width: 65px;
    height: 30px;
    vertical-align: top;
    margin-left: 10px;
    *display: block;
    *float: left;
}

.spTurnTo input {
    *margin-left: -10px;
}

.spTurnTo input:focus {
    outline: 0;
}

.spTurnTo .btn {;
    margin-left: 5px;
}

.spTurnToAllPageTip {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 30px;
    top: -100%;
    font-size: 12px;
    text-align: center;
    left: 0;
    background-color: #ccc;
    z-index: 3;
    color: #000;
}

.spTurnTo input:focus ~ .spTurnToAllPageTip {
    display: block;
}

.spTurnTo:hover .spTurnToAllPageTip {
    *display: block;
}

.spPage .spCover {
    position: relative;
    width: 150px;
    height: 30px;
    overflow: hidden;
}

.spActiveBg {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid transparent;
    background-color: #367fa9;
    z-index: 2;
}

.spPage ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    font-size: 0;
    overflow: hidden;
}

.spPage ul li {
    list-style-type: none;
    overflow: hidden;
}

.spPage ul li p {
    position: relative;
    z-index: 3;
}

.spPage ul li.active {
    color: #fff;
}

/*
 *  原创－反馈请邮件至：361899429@qq.com
 *  创建于20180426     最后修改20180510
 */
(function ($) {
    $.fn.extend({
        simplePaging: function (opts) {
            //设置默认参数
            var opt = {
                allPage: 12,//总页数
                showPage: 5,//显示页数
                startPage: 1,//第一页页码数字
                initPage: 1,//加载完毕自动跳转到第n页(初始化激活页)
                initPageClick:true,//每次页面加载完毕后，是否触发initPage页的绑定事件
                first: "首页",//首页显示字符
                last: "尾页",//尾页显示字符
                prev: "«",//上一页显示字符
                next: "»",//下一页显示字符
                showTurnTo: false,//是否显示跳转按钮，true显示，false不显示
                animateType: "animation",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
                animationTime: 300,//animateType为animation时，动画过渡时间(ms)
                callBack: function (num) {
                    console.log(num)
                }
            };
            //合并参数
            var option = $.extend(opt, opts);
            /*初始化激页码不能大于或小于开始页码*/
            if (option.initPage < option.startPage) {
                option.initPage = option.startPage
            } else if (option.initPage > option.startPage + option.allPage - 1) {
                option.initPage = option.startPage + option.allPage - 1
            }
            /*过渡模式跳动时间设置*/
            if (option.animateType !== "animation") {
                switch (option.animateType) {
                    case "jumpy":
                        option.animationTime = 0;
                        break;
                    case "fast":
                        option.animationTime = 100;
                        break;
                    case "normal":
                        option.animationTime = 200;
                        break;
                    case "slow":
                        option.animationTime = 400;
                        break;
                    case "verySlow":
                        option.animationTime = 800;
                        break;
                }
            }
            /*显示页至少有1页，并且不能大于总页数*/
            option.showPage <= 0 ? option.showPage = 1 : option.showPage;
            option.showPage > option.allPage ? option.showPage = option.allPage : option.showPage;
            /***************/
            var dialog = {};
            var simplePaging = $(this);
            var spPrev = $("<div class='spPrev'>");
            var spFirst = $("<div class='spFirst'>");
            var spPage = $("<div class='spPage'>");
            var spCover = $("<div class='spCover'>");
            var spActiveBg = $("<div class='spActiveBg'>");
            var spLast = $("<div class='spLast'>");
            var spNext = $("<div class='spNext'>");
            var spTurnTo = $("<div class='spTurnTo'>");
            var ul = $("<ul>");
            var delay = false;//延时，不用修改，此项用于前一个点击未完全执行时，阻止其它事件触发
            var init = true;//是否初始化加载页面
            var centerShowPage;
            if (option.showPage % 2 === 0) {
                centerShowPage = Math.floor((option.showPage - 1) / 2)
            } else {
                centerShowPage = Math.floor(option.showPage / 2)
            }
            /*程序开始*/
            dialog.init = function () {
                //插件页码
                ul.append(spActiveBg);
                for (var i = 0, j = option.startPage; i < option.allPage; i++, j++) {
                    var li = $("<li>");
                    li.html("<p>" + j + "</p>").on("click", function () {
                        if (!delay) {
                            changePage($(this).text())
                        }
                    });
                    ul.append(li)
                }
                //上一页
                spPrev.text(option.prev).on("click", function () {
                    if (!delay) {
                        var num = ul.find("li.active").text() - 1;
                        changePage(num)
                    }
                });
                //首页
                spFirst.text(option.first).on("click", function () {
                    if (!delay) {
                        var num = ul.find("li:first").text();
                        changePage(num)
                    }
                });
                //尾页
                spLast.text(option.last).on("click", function () {
                    if (!delay) {
                        var num = ul.find("li:last").text();
                        changePage(num)
                    }
                });
                //下一页
                spNext.text(option.next).on("click", function () {
                    if (!delay) {
                        var num = ul.find("li.active").text() - 0 + 1;
                        changePage(num)
                    }
                });
                spCover.append(ul);
                spPage.append(spCover);
                simplePaging.append(spPrev, spFirst, spPage, spLast, spNext);
                spCover.width(ul.find("li").outerWidth(true) * option.showPage);//页码中间宽度
                ul.width(ul.find("li").outerWidth(true) * option.allPage).find("li").eq(option.initPage - option.startPage).trigger("click");//页码总宽度
                //显示跳转
                if (option.showTurnTo) {
                    var input = $("<input type='text'>");
                    var btn = $("<div class='btn'>");
                    var spTurnToAllPageTip = $("<div class='spTurnToAllPageTip'>");
                    input.val(option.startPage).change(function () {
                        var num = $(this).val();
                        num > (option.allPage + option.startPage - 1) ? num = (option.allPage + option.startPage - 1) : num;
                        num <= option.startPage ? num = option.startPage : num;
                        $(this).val(num);
                    });
                    btn.text("跳转").on("click", function () {
                        if (!delay) {
                            var num = input.val();
                            changePage(num)
                        }
                    });
                    $(document).keyup(function (event) {
                        var e = event || window.event;
                        var k = e.keyCode || e.which;
                        if (k == 13 && input.is(":focus")) {
                            btn.trigger("click");
                            input.blur();
                        }
                    });
                    spTurnToAllPageTip.text("共" + (option.allPage + option.startPage - 1) + "页");
                    spTurnTo.append(input, btn, spTurnToAllPageTip);
                    simplePaging.append(spTurnTo).width(ul.find("li").outerWidth(true) * (option.showPage + 6) + 15);
                } else {
                    simplePaging.width(ul.find("li").outerWidth(true) * (option.showPage + 4));
                }
            };
            /*改变页码函数*/
            function changePage(num) {
                if (num < option.startPage || num > option.allPage + option.startPage - 1) {
                    return false;
                } else if (ul.find("li.active").text() == num&&!init) {
                    return false;
                } else if (isNaN(num)) {
                    return false;
                }
                delay = !delay;
                num = Number(num);
                var leng = num - option.startPage;
                var liWidth = ul.find("li").outerWidth(true);
                ul.find("li.active").removeClass("active");
                spActiveBg.animate({"left": liWidth * (num - option.startPage)}, option.animationTime);
                if (leng <= centerShowPage) {
                    ul.animate({"left": 0}, option.animationTime, function () {
                        autoActive()
                    });
                } else if (leng >= option.allPage - centerShowPage - 1) {
                    ul.animate({"left": -liWidth * (option.allPage - option.showPage)}, option.animationTime, function () {
                        autoActive()
                    });
                } else {
                    ul.animate({"left": -liWidth * (leng - centerShowPage)}, option.animationTime, function () {
                        autoActive()
                    });
                }
                function autoActive() {
                    delay = !delay;
                    ul.find("li").eq(num - option.startPage).addClass("active");
                    if(init){
                        init = false;
                        if(option.initPageClick){
                            option.callBack(num);
                        }
                    }else {
                        option.callBack(num);
                    }
                }
            }

            dialog.init();
        }
    });
})(jQuery);

转载于:https://www.cnblogs.com/9608kai/p/9055602.html