jq页面切换插件

学习前端已经大半年了，也算有点小东西。
今天写下博客记录下。
经常在页面中看一些数据超出页面不会显示，要点击切换页面按钮才会出现。
思路：
1.利用jquery的实例扩展的方法，增加实例方法，
2.所有的步骤全部放在一个函数对象中，在实例方法中只要new一下，然后在调用函数对象中的init方法
3.元素包裹，全部的按钮用li完成，li全部放入ul中。省略号用span
4.不管页面有无数据当前页不可为0，即需先创建第一个li按钮
5.如果显示的当前页不是第一页时，要出现一个为上一页的li
6.总的页面数大于当前页的时候，在ul中的最后需要有一个可以切换到下一页的li，否则当前页就是最后一页
7.创建第一页到最后一页中间的li，第一页与最后一页是无论如何都不会被省略的，当前页会随着我们的操作发生变化，规定当前页-2大于2时，将当前页-1的li省略；当前页+2时小于总页面数-1，将总页面 - 当前页的省略当然当前页+2不能大于等于最后一页-2。
8.如果满足第7条，最后的条件时，就要开始创建中间的li了，来一个for循环
9.在创建之前，先要把满足条件的span省略号给添加进去，
10.在每一次当前页改变时，都要调用函数对象中的init方法，给页面重新渲染

上面就是大致思路，表达能力不太强，没有解释太清楚，关键看js代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper ul{
            overflow: hidden;
        }
        .wrapper ul li{
            /* width: 30px; */
            list-style: none;
            padding: 0 5px;
            height: 30px;
            display: inline-block;
            /* float: left; */
            border: 1px solid black;
        }
        .myPage{
            background-color: aqua;
        }

    </style>
</head>

<body>
    <div class="wrapper"></div>

    <script src="./jquery-3.4.1.min.js"></script>
    <script src="./index.js"></script>
    <script>
    	//插入插件
        $(".wrapper").page({
            curPage: 1,
            allPage: 10,
            callBack: function (pageIndex) {
                // console.log(pageIndex);
            }
        })

    </script>
</body>

</html>

(function () {
    function PageTurning(config, wrapp) {
        this.curPage = config.curPage || 1;//当前页
        this.allPage = config.allPage || 1;//总的页数
        this.wrapp = wrapp || $("body");
        this.callBack = config.callBack || function () { };//回调函数
        this.init = function () {
            this.Elementwrall();
            this.pageChange();
        }
    }
    
    PageTurning.prototype.Elementwrall = function () {
        var $ul = $("<ul/>")
        //当当前页不是1时，创建li为上一页
        if (this.curPage > 1) {
            $("<li class='prev'>上一页</li>").appendTo($ul);
        }
        
        //创建第一个li按钮并添加到ul中
        $("<li class='indexPage'>1</li>").addClass(this.curPage == 1 ? "myPage" : "").appendTo($ul);
        
        //添加前面的省略号
        if (this.curPage - 2 > 2) { //当前页与前二页相差大于2 要有省略号
            $("<span>...</span>").appendTo($ul);
        }

        //中间的五页
        for (var i = this.curPage - 2; i <= this.curPage + 2; i++) {//如果curPage=5, 中间页数显示为3-7，
            if (i > 1 && i < this.allPage) {
                $("<li class='indexPage'></li>")
                    .text(i)
                    .addClass(this.curPage == i ? "myPage" : "")
                    .appendTo($ul)
                console.log(i, this.curPage);
            }
        }
		//添加最后一个省略号
        if (this.curPage + 2 < this.allPage - 1) {
            $("<span>...</span>").appendTo($ul);
        }

        //最后一页
        this.allPage != 1 ? $("<li class='indexPage'></li>")
            .text(this.allPage)
            .addClass(this.curPage == this.allPage ? "myPage" : "")
            .appendTo($ul) : "";

		//总的页面数大于当前页时，要出现下一页的li
        if (this.allPage > this.curPage) {
            $("<li class='next'>下一页</li>").appendTo($ul);
        }

        // 每次变化时要没有内容，否则会全部覆盖在一起
        this.wrapp.empty().append($ul);
    }

	//事件监听
    PageTurning.prototype.pageChange = function () {
        var self = this;
        $(".next", this.wrapp).click(function () {
            self.curPage++;
            self.init();//重新渲染
            self.callBack(self.curPage);
        });

        $(".prev", this.wrapp).click(function () {
            self.curPage--;
            self.init();
            self.callBack(self.curPage);
        });

        $(".indexPage", this.wrapp).click(function (e) {
            // var target = e.target;
            if (this.className.indexOf("myPage") == -1) {
                self.curPage = parseInt($(this).text());
                self.init();
                self.callBack(self.curPage);
            }
        })

    }
    //实例方法扩展
    $.fn.extend({
        page: function (config) {
            var page = new PageTurning(config, $(this));
            page.init();
        }
    })
})()

码爸爸

原创文章 14 获赞 17 访问量 3793

关注私信

猜你喜欢