学习前端已经大半年了,也算有点小东西。
今天写下博客记录下。
经常在页面中看一些数据超出页面不会显示,要点击切换页面按钮才会出现。
思路:
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();
}
})
})()