- 运用对象的方式 给页码插件分装函数
- 先创建一个box的容器，再动态添加单击事件的div ，p，input和button标签
- 要设置默认选中页数，设置默认值，这个可以根据客户之后的需求修改负值
- 设置当前页
- 设置禁用项
<body>
<div class="box"></div>
<script>
function Page(classname, options = {}) {
// 将参数定义成属性
this.options = options
this.fn = this.options.fn || function () {}
// 根据传递进来的类名获取，放到分页容器中
this.container = document.querySelector('.' + classname);
// 创建分页大盒子
this.box = document.createElement('div')
this.container.appendChild(this.box)
// 修饰样式
this.setStyle(this.box, {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
})
// 设置默认参数
this.default = {
language: {
first: '首页',
prev: '上一页',
pagination: '',
next: '下一页',
last: '尾页'
},
pageData: {
total: 1000,
pageSize: 10
}
}
// 用户课替换参数
this.setDefault()
// 定义当前页
this.currentPage = 1
// 放页码的盒子
this.pageBox = null
// 设置总页数
this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
// 创建自定义参数的div
this.createDiv()
// 创建页码
this.createPage()
// 绑定单击事件
this.click()
// 设置禁用项
this.setDisabled()
// 添加文本框和按钮
this.textBox()
// 调用分装函数
this.fn(this.currentPage)
}
// 修饰样式的方法
// 添加文本框和按钮的方法
Page.prototype.textBox = function () {
var input = document.createElement('input')
this.box.appendChild(input)
this.setStyle(input, {
width: '50px',
height: '27px',
outline: 'none',
border: '1px solid #cccc',
margin: '5px',
'padding-left': '6px'
})
var btn = document.createElement('button')
this.box.appendChild(btn)
btn.innerText = 'GO'
this.setStyle(btn, {
height: '31px',
margin: '5px',
border: '1px solid #ccc',
'background-color': 'skyblue',
outline: 'none'
})
}
// 设置禁用项
Page.prototype.setDisabled = function () {
// 首页、上一页
if (this.currentPage === 1) {
// 改背景颜色
this.box.children[0].style.backgroundColor = '#eee'
this.box.children[1].style.backgroundColor = '#eee'
// 添加特殊标记
this.box.children[0].setAttribute('disabled', true)
this.box.children[1].setAttribute('disabled', true)
} else {
this.box.children[0].style.backgroundColor = 'transparent'
this.box.children[1].style.backgroundColor = 'transparent'
this.box.children[0].removeAttribute('disabled')
this.box.children[1].removeAttribute('disabled')
}
// 尾页、下一页
if (this.currentPage === this.totalPage) {
this.box.children[3].style.backgroundColor = '#eee'
this.box.children[4].style.backgroundColor = '#eee'
this.box.children[3].setAttribute('disabled', true)
this.box.children[4].setAttribute('disabled', true)
} else {
this.box.children[3].style.backgroundColor = 'transparent'
this.box.children[4].style.backgroundColor = 'transparent'
this.box.children[3].removeAttribute('disabled')
this.box.children[4].removeAttribute('disabled')
}
}
// 设置单击事件
Page.prototype.click = function () {
this.box.onclick = () => {
// 绑定事件
var target = window.event.target
if (target.className === 'first' && target.getAttribute('disabled') != 'true') {
this.currentPage = 1
this.createPage()
this.setDisabled()
this.fn(this.currentPage)
} else if (target.className === 'prev' && target.getAttribute('disabled') != 'true') {
this.currentPage--
this.createPage()
this.setDisabled()
this.fn(this.currentPage)
} else if (target.className === 'next' && target.getAttribute('disabled') != 'true') {
this.currentPage++
this.createPage()
this.setDisabled()
this.fn(this.currentPage)
} else if (target.className === 'last' && target.getAttribute('disable') != 'true') {
this.currentPage = this.totalPage
this.createPage()
this.setDisabled()
this.fn(this.currentPage)
} else if (target.nodeName === 'P' && target.innerText - 0 != this.currentPage) {
this.currentPage = target.innerText - 0
this.createPage()
this.setDisabled()
this.fn(this.currentPage)
} else if (target.nodeName === 'BUTTON' && target.previousElementSibling.value - 0 != this
.currentPage) {
if (target.previousElementSibling.value > this.totalPage) {
target.previousElementSibling.value = this.totalPage
}
if (target.previousElementSibling.value < 1) {
target.previousElementSibling.value = 1
}
this.currentPage = target.previousElementSibling.value - 0
this.createPage()
this.setDisabled()
this.fn(this.currentPage)
}
}
}
// 创建页码的方式、
Page.prototype.createPage = function () {
// 先将盒子清空
this.pageBox.innerHTML = ''
// 大于5页，有三种情况
if (this.totalPage > 5) {
// 前三页
if (this.currentPage <= 3) {
this.createP(1, 5)
}
// 最后三页
else if (this.currentPage >= this.totalPage - 2) {
this.createP(this.totalPage - 4, this.totalPage)
}
// 中间页码-2 page +2
else {
this.createP(this.currentPage - 2, this.currentPage + 2)
}
}
// 小于5页直接显示1到总页数
else {
this.createP(1, this.totalPage)
}
}
// 创建页码的P标签
Page.prototype.createP = function (start, end) {
for (var a = start; a <= end; a++) {
var p = document.createElement('p')
p.innerText = a
this.pageBox.appendChild(p)
this.setStyle(p, {
padding: '5px',
margin: '5px',
border: '1px solid #ccc'
})
if (this.currentPage === a) {
p.style.backgroundColor = 'skyblue'
}
}
}
// 创建div的方法
Page.prototype.createDiv = function () {
for (var key in this.default.language) {
var div = document.createElement('div')
// 给div创建类名
div.className = key
div.innerText = this.default.language[key]
if (key != 'pagination') {
this.setStyle(div, {
margin: '5px',
padding: '5px',
border: '1px solid #ccc'
})
} else {
this.pageBox = div
this.setStyle(div, {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
})
}
// 将添加的div放在大盒子里
this.box.appendChild(div)
}
}
// 替换参数的方法
Page.prototype.setDefault = function () {
// 遍历用户传入的参数
for (var key in this.options.language) {
// 替换名称
this.default.language[key] = this.options.language[key]
}
for (var key in this.options.PageData) {
// 替换页
this.default.PageData[key] = this.options.PageData[key]
}
}
// 设置样式
Page.prototype.setStyle = function (ele, obj) {
for (var key in obj) {
ele.style[key] = obj[key]
}
}
new Page('box')
</script>
</body>
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
