分页插件使用的dome

其他 2018-05-18 12:46:44 阅读次数: 3 
<!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;
}

　　js

/*
 *  原创－反馈请邮件至：[email protected]
 *  创建于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);

　　

猜你喜欢

转载自www.cnblogs.com/9608kai/p/9055602.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022