1,结果如下图,tab太多,一行放不下,右侧展现左右按钮,鼠标移上tab页可左右移动
2,代码
/**
* 功能按钮过多时,可左右移动
* @param {*} id 按钮区域id
* @param {*} dom 按钮元素
* @param {*} btnclass 按钮样式
* @param {*} mp 每个按钮需要增加的宽度
* @param {*} n 隐藏按钮增加的个数
*/
function btnShowOrHide(id, dom, btnclass='', mp=0, n=0) {
var $skyBtnGroup = $(id);
// 先把所有应该展示的按钮展示出来
$skyBtnGroup.find('.btnum').show();
// 按钮过多,添加展开收起功能
$skyBtnGroup.find(dom+':visible').addClass('btnum');
// 隐藏的按钮移到最后面
$skyBtnGroup.find(dom+':hidden').each(function (i, item) {
$skyBtnGroup.append(item);
});
var $btnArr = $skyBtnGroup.find('.btnum');
$btnArr.show();
var skyWidth = $skyBtnGroup.width();
var btnumber = $btnArr.length;
var btnWidth = 0;
$btnArr.each(function (i, item) {
btnWidth += ($(item).width() + mp);
if (btnWidth >= skyWidth) {
btnumber = i - 1;
return false;
}
})
if ($btnArr.length > btnumber) { //按钮大于n个
// var showIconHtml = '<i class="fa fa-angle-double-down sh-btn" id="shBtn"></i>';
var showIconHtml = '<i class="fa fa-angle-double-left sh-btn '+btnclass+' not-use" id="lBtn"></i><i class="fa fa-angle-double-right sh-btn '+btnclass+'" id="rBtn"></i>';
if ($('#btnIconTd').length > 0) { //如果已经有按钮,先删除
$('#btnIconTd').remove();
}
// 追加左右按钮
if(id == '.sky-btn-group') {
$skyBtnGroup.after('<td id="btnIconTd" style="padding-right: 8px;">' + showIconHtml + '</td>');
}else{
$skyBtnGroup.after('<div id="btnIconTd" class="fl" style="padding-right: 8px;">' + showIconHtml + '</div>');
}
// 先隐藏掉多余的按钮
var $moreBtn = $skyBtnGroup.find('.btnum:gt(' + Number(btnumber - n) + ')');
$moreBtn.hide();
var skyWidth = $skyBtnGroup.width();
$('#rBtn').hover(function () { //右按钮
interval = setInterval(function () {
var totalWidth = 0;
$skyBtnGroup.find('.btnum:visible').each(function (i, item) {
totalWidth = totalWidth + $(item).width() + mp
})
var lastBtn = $skyBtnGroup.find('.btnum:visible:last');
var firstBtn = $skyBtnGroup.find('.btnum:visible:first');
var lastNextBtn = lastBtn.next('.btnum');
if (lastNextBtn.length > 0) {
$('#rBtn').removeClass('not-use');
$('#lBtn').removeClass('not-use');
lastNextBtn.show();
var lastNextBtnWidth = lastNextBtn.width() + mp;
lastNextBtn.hide();
var realWidth = totalWidth - firstBtn.width() - mp + lastNextBtnWidth;
if (realWidth <= skyWidth) {
if (totalWidth + lastNextBtnWidth > skyWidth) {
firstBtn.hide();
}
lastNextBtn.show();
} else {
firstBtn.hide();
}
} else {
$('#rBtn').addClass('not-use');
clearInterval(interval)
}
}, 500)
}, function () {
clearInterval(interval)
})
$('#lBtn').hover(function () { //左按钮
interval = setInterval(function () {
var numleft = $skyBtnGroup.find('.btnum:visible').length;
var totalWidth = 0;
$skyBtnGroup.find('.btnum:visible').each(function (i, item) {
totalWidth = totalWidth + $(item).width() + mp
})
var lastBtn = $skyBtnGroup.find('.btnum:visible:last');
var firstBtn = $skyBtnGroup.find('.btnum:visible:first');
var firstPrevBtn = firstBtn.prev('.btnum');
if (firstPrevBtn.length > 0) {
firstPrevBtn.show();
var firstPrevBtnWidth = firstPrevBtn.width() + mp;
firstPrevBtn.hide();
var realWidth = totalWidth - lastBtn.width() - mp + firstPrevBtnWidth;
if (realWidth <= skyWidth) {
$('#lBtn').removeClass('not-use');
$('#rBtn').removeClass('not-use');
if (totalWidth + firstPrevBtnWidth > skyWidth) {
lastBtn.hide();
}
firstPrevBtn.show();
} else {
lastBtn.hide();
}
} else {
$('#lBtn').addClass('not-use');
clearInterval(interval)
}
}, 500);//启动计时器,调用overs函数,
}, function () {
clearInterval(interval)
})
} else {
$('#btnIconTd').remove();
$skyBtnGroup.find('button.btnum').show();
}
}
3,在需要的地方调用方法即可
// tab页过多时,增加左右按钮
btnShowOrHide('#tab_inner', 'li', 'tab-more');