jQuery插件開發1：分頁條

時間 2019-12-06

原文原文鏈接

定義三個文件：demo1.html/demo1.js/demo1.css 還有引入jQuery庫：jquery-3.2.1.jsjavascript

1. demo1.html

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="../css/demo1.css">
<head>
    <meta charset="UTF-8">
    <title>分頁插件</title>
</head>
<body style="text-align: center">
<div id="pageShow"></div>
<!--插件安放位置-->
<div id="pageDiv"></div>

<!--導入jQuery庫-->
<script src="../js/jquery-3.2.1.js"></script>
<!--導入插件-->
<script src="../js/demo1.js"></script>

<script>
//在此使用插件
$('#pageDiv').pageInit(1,5,30);
</script>

</body>
</html>

2. demo1.js

(function () {

    //默認值
    var curPage = 1;
    var showN = 5;
    var total = 20;
    //給jQuery對象的原型添加方法
    jQuery.fn.pageInit = function (curPTemp,showNTemp,totalPTemp) {
        curPage = curPTemp;
        showN = showNTemp;
        total = totalPTemp;
        callback();
    };
    //回調函數
    function callback() {
        //根據初始化獲取的參數進行製做UI
        var str = '';
        for(var i=0;i<showN;i++){
           str += '<li><a href="#">'+(curPage+i).toString()+'</a></li>';
        }
        str = '<li><a href="#">上一頁</a></li>' + str + '<li><a href="#">下一頁</a></li>';
        var page = '<ul>' + str +'</ul>';
        $('#pageDiv').html(page);
        //第一次起來當前的頁在最左邊，高亮。
        $("#pageDiv a").eq(1).css("background-color", "green");
        $('#pageShow').text(curPage.toString());
        //給頁碼添加點擊的監聽函數
        $('#pageDiv a').click(function () {
            var temp = $(this).text();
            //直接點擊一個頁碼的操做
            if(temp !== '下一頁' && temp!== '上一頁' ){
                $('#pageDiv a').css("background-color","darkblue");
                $(this).css("background-color","green");
                $('#pageShow').text(temp);
                curPage = parseInt(temp);
            }
            //上一頁的操做
            if(temp === '上一頁') {
                if (curPage == 1 ) {
                    $('#pageShow').text("首頁");
                }else {
                    if (curPage <= parseInt($("#pageDiv a").eq(1).text())) {

                        $("#pageDiv a").each(function () {
                            var temp = $(this).text();
                            if (temp !== '下一頁' && temp !== '上一頁') {
                                $(this).text((parseInt(temp)-1).toString());
                            }
                        });
                        curPage = parseInt($("#pageDiv a").eq(1).text());
                        console.log("\n " + curPage);
                        $('#pageShow').text(curPage.toString());
                    } else {
                        $("#pageDiv a").each(function () {
                            if ((curPage - 1).toString() === $(this).text()) {
                                $('#pageDiv a').css("background-color", "darkblue");
                                $(this).css("background-color", "green");
                            }
                        });
                        curPage -= 1;
                        $('#pageShow').text(curPage.toString());
                    }
                }
            }
            //下一頁的操做
            if(temp === '下一頁') {
                if (curPage >= total) {
                    $('#pageShow').text("末頁");
                } else {

                    if (parseInt($("#pageDiv a").eq(-2).text()) <= curPage) {

                        $("#pageDiv a").each(function () {

                            var temp = $(this).text();
                            if (temp !== '下一頁' && temp !== '上一頁') {
                                $(this).text((parseInt(temp) + 1).toString());
                            }
                            curPage = parseInt($("#pageDiv a").eq(-2).text());
                            $('#pageShow').text(curPage.toString());
                        });
                    }else {
                        $("#pageDiv a").each(function () {
                            if ((curPage + 1).toString() === $(this).text()) {
                                $('#pageDiv a').css("background-color", "darkblue");
                                $(this).css("background-color", "green");
                            }
                        });
                        curPage += 1;
                        $('#pageShow').text(curPage.toString());
                    }
                }

            }
        });
    }
}());

3. demo1.css

#pageDiv a,#pageDiv li{
    float: left;
    height: 30px;
    width: 90px;
    list-style: none;
    border-style: solid;
    text-align: center;
    color: white;
    background-color: darkblue;
    text-decoration:none;
}
#pageShow{
    text-align: center;
    height: 400px;
    font-size: 15em;
}
#pageDiv{
    text-align: center;
    background-color: yellow;
    clear: both;
    margin-left: 300px;
}