前言：
layui分页模块 laypage limits下拉框为select标签，导致下拉框样式不能修改且在不同浏览器中呈现的效果也不一致。
所以对源文件中select功能进行修改，自定义模拟下拉样式。
修改文件为laypage.js（使用的是layui.all.js的话，找到其中的laypage模块进行同样修改）
（修改较为仓促，可自行精简）
/** layui-v2.4.5 MIT License By https://www.layui.com */ ;
layui.define(function(e) {
"use strict";
var a = document,
t = "getElementById",
n = "getElementsByTagName",
i = "laypage",
r = "layui-disabled",
u = function(e) {
var a = this;
a.config = e || {}, a.config.index = ++s.index, a.render(!0)
};
u.prototype.type = function() {
var e = this.config;
if ("object" == typeof e.elem) return void 0 === e.elem.length ? 2 : 3
},
u.prototype.view = function() {
var e = this,
a = e.config,
t = a.groups = "groups" in a ? 0 | a.groups : 5;
a.layout = "object" == typeof a.layout ? a.layout : ["prev", "page", "next"], a.count = 0 | a.count, a.curr = 0 | a.curr || 1, a.limits = "object" == typeof a.limits ? a.limits : [10, 20, 30, 40, 50], a.limit = 0 | a.limit || 10, a.pages = Math.ceil(a.count / a.limit) || 1, a.curr > a.pages && (a.curr = a.pages), t < 0 ? t = 1 : t > a.pages && (t = a.pages), a.prev = "prev" in a ? a.prev : "上一页", a.next = "next" in a ? a.next : "下一页";
var n = a.pages > t ? Math.ceil((a.curr + (t > 1 ? 1 : 0)) / (t > 0 ? t : 1)) : 1,
i = {
prev: function() {
return a.prev ? '<a href="javascript:;" class="layui-laypage-prev' + (1 == a.curr ? " " + r : "") + '" data-page="' + (a.curr - 1) + '">' + a.prev + "</a>" : ""
}(),
page: function() {
var e = [];
if (a.count < 1) return "";
n > 1 && a.first !== !1 && 0 !== t && e.push('<a href="javascript:;" class="layui-laypage-first" data-page="1" title="首页">' + (a.first || 1) + "</a>");
var i = Math.floor((t - 1) / 2),
r = n > 1 ? a.curr - i : 1,
u = n > 1 ? function() {
var e = a.curr + (t - i - 1);
return e > a.pages ? a.pages : e
}() : t;
for (u - r < t - 1 && (r = u - t + 1), a.first !== !1 && r > 2 && e.push('<span class="layui-laypage-spr">…</span>'); r <= u; r++) r === a.curr ? e.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" ' + (/^#/.test(a.theme) ? 'style="background-color:' + a.theme + ';"' : "") + "></em><em>" + r + "</em></span>") : e.push('<a href="javascript:;" data-page="' + r + '">' + r + "</a>");
return a.pages > t && a.pages > u && a.last !== !1 && (u + 1 < a.pages && e.push('<span class="layui-laypage-spr">…</span>'), 0 !== t && e.push('<a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="' + a.pages + '">' + (a.last || a.pages) + "</a>")), e.join("")
}(),
next: function() {
return a.next ? '<a href="javascript:;" class="layui-laypage-next' + (a.curr == a.pages ? " " + r : "") + '" data-page="' + (a.curr + 1) + '">' + a.next + "</a>" : ""
}(),
count: '<span class="layui-laypage-count">共 ' + a.count + " 条</span>",
limit: function() {
//第一处修改开始
var e = ['<span class="layui-laypage-limits"><span class="limits-wrap" lay-ignore><input class="limits-input" value="" readonly/><ul class="limits-ul">'];//将原select标签替换为模拟下拉
return layui.each(a.limits, function(t, n) {
e.push('<li value="' + n + '"' + (n === a.limit ? "selected" : "") + ">" + n + " 条/页</li>")
}), e.join("") + "</ul></span></span>"
////第一处修改结束
}(),
refresh: ['<a href="javascript:;" data-page="' + a.curr + '" class="layui-laypage-refresh">', '<i class="layui-icon layui-icon-refresh"></i>', "</a>"].join(""),
skip: function() {
return ['<span class="layui-laypage-skip">到第', '<input type="text" min="1" value="' + a.curr + '" class="layui-input">', '页<button type="button" class="layui-laypage-btn">确定</button>', "</span>"].join("")
}()
};
return ['<div class="layui-box layui-laypage layui-laypage-' + (a.theme ? /^#/.test(a.theme) ? "molv" : a.theme : "default") + '" id="layui-laypage-' + a.index + '">', function() {
var e = [];
return layui.each(a.layout, function(a, t) {
i[t] && e.push(i[t])
}), e.join("")
}(), "</div>"].join("")
},
u.prototype.jump = function(e, a) {
if (e) {
var t = this,
i = t.config,
r = e.children,
u = e[n]("button")[0],
l = e[n]("input")[0],
//第二处修改开始
p = e[n]("li"),
pp = document.querySelector('[selected]'),
ppp = pp.parentNode,
ppi = ppp.previousSibling,
input = document.getElementsByClassName("limits-input")[0],
//第二处修改结束
c = function() {
var e = 0 | l.value.replace(/\s|\D/g, "");
e && (i.curr = e, t.render())
};
//第三处修改开始
ppi.value = pp.innerText;//获取当前selected的值
//第三处修改结束
if (a) return c();
for (var o = 0, y = r.length; o < y; o++) "a" === r[o].nodeName.toLowerCase() && s.on(r[o], "click", function() {
var e = 0 | this.getAttribute("data-page");
e < 1 || e > i.pages || (i.curr = e, t.render())
});
//第四处修改开始（模拟select功能）
for (var q = 0; q < p.length; q++) {
var aa = p[q].parentNode;
var bb = aa.previousSibling;
p[q] && s.on(p[q], "mousedown", function() {
var e = this.getAttribute("value");
var tt = this.innerText;
bb.value = tt;
i.curr * e > i.count && (i.curr = Math.ceil(i.count / e)), i.limit = e, t.render();
aa.style.display = "none"
}), u && s.on(u, "click", function() {
c()
})
};
input && s.on(input, "focus", function() {
this.nextSibling.style.display = "block"
});
input && s.on(input, "blur", function() {
this.nextSibling.style.display = "none"
})
//第四处修改结束
}
},
u.prototype.skip = function(e) {
if (e) {
var a = this,
t = e[n]("input")[0];
t && s.on(t, "keyup", function(t) {
var n = this.value,
i = t.keyCode;
/^(37|38|39|40)$/.test(i) || (/\D/.test(n) && (this.value = n.replace(/\D/, "")), 13 === i && a.jump(e, !0))
})
}
},
u.prototype.render = function(e) {
var n = this,
i = n.config,
r = n.type(),
u = n.view();
2 === r ? i.elem && (i.elem.innerHTML = u) : 3 === r ? i.elem.html(u) : a[t](i.elem) && (a[t](i.elem).innerHTML = u), i.jump && i.jump(i, e);
var s = a[t]("layui-laypage-" + i.index);
n.jump(s), i.hash && !e && (location.hash = "!" + i.hash + "=" + i.curr), n.skip(s)
};
var s = {
render: function(e) {
var a = new u(e);
return a.index
},
index: layui.laypage ? layui.laypage.index + 1e4 : 0,
on: function(e, a, t) {
return e.attachEvent ? e.attachEvent("on" + a, function(a) {
a.target = a.srcElement, t.call(e, a)
}) : e.addEventListener(a, t, !1), this
}
};
e(i, s)
});
添加样式
/*模拟limits下拉*/
.layui-laypage .layui-laypage-limits .limits-input{
min-width: 77px;
border: 1px solid #e5e5e5 !important;
margin: 0;
height: 23px;
line-height: 23px;
cursor: default;
text-align: left;
}
.layui-laypage .layui-laypage-limits .limits-wrap{
position: relative;
}
.layui-laypage .layui-laypage-limits .limits-wrap::after{
content: "";
width: 0;
height: 0;
position: absolute;
border-top: 0;
border-bottom: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
right: 10px;
top: 9px;
}
.layui-laypage .layui-laypage-limits .limits-ul{
display: none;
position: absolute;
min-width: 100px;
right: 0;
bottom: 100%;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 5px 0;
}
.layui-laypage .layui-laypage-limits .limits-ul li{
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
cursor: default;
}
.layui-laypage .layui-laypage-limits .limits-ul li:hover{
color: #262626;
background-color: #f5f5f5;
}
.layui-laypage .layui-laypage-limits .limits-ul li[selected]{
background-color: #02c286;
color: #fff;
}
网友评论