<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{margin:0;padding:0;}
.kit-tabs {
position: relative;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
padding-left: 41px;
padding-right: 82px;
z-index: 999;
}
.kit-tabs-prev {
left: 0;
border-right: 1px solid #F0F0F0;
}
.kit-tabs .kit-tabs-prev, .kit-tabs .kit-tabs-next{
position: absolute;
top: 0;
text-align: center;
line-height: 40px;
width: 40px;
cursor: pointer;
}
.kit-tabs .kit-tab {
height: 40px;
overflow: hidden;
}
.kit-tabs .kit-tab .kit-tab-title {
position: relative;
width: 1000%;
}
.kit-tabs .kit-tab .kit-tab-title li:first-child {
padding-right: 15px;
}
.kit-tabs .kit-tab .kit-tab-title li {
display: table-cell;
line-height: 40px;
padding-left: 15px;
padding-right: 33px;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
position: relative;
cursor: pointer;
border-right: 1px solid #F0F0F0;
}
li {
list-style: none;
}
.kit-tabs .kit-tabs-prev, .kit-tabs .kit-tabs-next{
position: absolute;
top: 0;
text-align: center;
line-height: 40px;
width: 40px;
cursor: pointer;
}
.kit-tabs .kit-tabs-next {
right: 40px;
border-left: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
}
.kit-tabs .kit-tab .kit-tab-title li:hover {
transition: all .2s;
-webkit-transition: all .2s;
background-color: #f2f2f2;
}
.kit-tabs .kit-tab .kit-tab-title > li.layui-this {
background-color: #f2f2f2;
display: table-cell !important;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="kit-tabs" kit-target="tabs" kit-tabs-t="true">
<div class="kit-tabs-prev"> <i class="layui-icon"></i> </div>
<div class="kit-tab">
<ul class="kit-tab-title" style="left: 0px;">
<li data-path="#/"> <span title="主页"><i class="layui-icon"></i> 主页</span> </li>
<li data-path="#/layui/layer"><span title="layer"><i class="layui-icon"></i> layer</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/laydate"><span title="laydate"><i class="layui-icon"></i> laydate</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/table"><span title="table"><i class="layui-icon"></i> table</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/laypage"><span title="laypage"><i class="layui-icon"></i> laypage</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/upload"><span title="upload"><i class="layui-icon"></i> upload</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/carousel"><span title="carousel"><i class="layui-icon"></i> carousel</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/laytpl"><span title="laytpl"><i class="layui-icon"></i> laytpl</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/flow"><span title="flow"><i class="layui-icon"></i> flow</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/util"><span title="util"><i class="layui-icon"></i> util</span><i class="layui-icon kit-tab-close">ဆ</i></li>
<li data-path="#/layui/code" class="layui-this"><span title="code"><i class="layui-icon"></i> code</span><i class="layui-icon kit-tab-close">ဆ</i></li>
</ul>
</div>
<div class="kit-tabs-next"> <i class="layui-icon"></i> </div>
</div>
</body>
</html>
<script type="text/javascript">
var _private = {
liHandler:function(){
$('.kit-tab li').click(function(){
$('.kit-tab li').removeClass('layui-this');
$(this).addClass('layui-this')
})
},
prevHandler: function() {
// prev event
$('.kit-tabs-prev').off('click').on('click', function() {
var tabsLeft = $('.kit-tab-title')[0].style.left;
var left = parseInt(tabsLeft.substr(0, tabsLeft.indexOf('px')));
if (left === 0) {
return;
} else {
left += $('.kit-tab').width();
left = left > 0 ? 0 : left;
$('.kit-tab-title').stop();
$('.kit-tab-title').animate({
'left': left + 'px'
});
}
});
},
nextHandler: function() {
$('.kit-tabs-next').off('click').on('click', function() {
var tabsLeft = $('.kit-tab-title')[0].style.left;
var left = parseInt(tabsLeft.substr(0, tabsLeft.indexOf('px')));
var tabsWidth = $('.kit-tab').width();//取顶级宽度
var liCountWidth = 0;
$('.kit-tab-title').children('li').each(function() {
var width = $(this).outerWidth();
liCountWidth += width;
});
if (tabsWidth < liCountWidth && (left - tabsWidth) > -liCountWidth) {
var colCount = parseInt(liCountWidth / tabsWidth);
left = (left - tabsWidth) >= 0 ? 0 : (left - tabsWidth);
$('.kit-tab-title').stop();
$('.kit-tab-title').animate({
'left': left + 'px'
});
}
});
}
}
_private.prevHandler();
_private.nextHandler();
_private.liHandler();
</script>
浙公网安备 33010602011771号