分頁插件使用的dome

<!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>

  cssjavascript

.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;
}

  jscss

/*
 *  原創-反饋請郵件至: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);
相關文章
相關標籤/搜索