mirror of https://github.com/layui/layui
Merge remote-tracking branch 'origin/2.x' into 2.x
commit
1c59d46699
|
@ -32,7 +32,7 @@ body{padding:20px;}
|
|||
</div>
|
||||
|
||||
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date, change: true})">添加Tab</button>
|
||||
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
|
@ -78,16 +78,18 @@ body{padding:20px;}
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this"><a href="#1">标题题题题题题1</a></li>
|
||||
<li><a href="#2">标题题题2</a></li>
|
||||
<li><a href="#3">标题3</a></li>
|
||||
<li><a href="#4">标题题题题题题题4</a></li>
|
||||
<li><a href="#5">标题5</a></li>
|
||||
<li><a href="#6">标题6</a></li>
|
||||
<li><a href="#7">标题7</a></li>
|
||||
<li><a href="#8">标题题题题题题题8</a></li>
|
||||
</ul>
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this"><a href="#1">标题题题题题题1</a></li>
|
||||
<li><a href="#2">标题题题2</a></li>
|
||||
<li><a href="#3">标题3</a></li>
|
||||
<li><a href="#4">标题题题题题题题4</a></li>
|
||||
<li><a href="#5">标题5</a></li>
|
||||
<li><a href="#6">标题6</a></li>
|
||||
<li><a href="#7">标题7</a></li>
|
||||
<li><a href="#8">标题题题题题题题8</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab" lay-filter="test" lay-allowClose="true">
|
||||
<ul class="layui-tab-title">
|
||||
|
|
|
@ -49,8 +49,10 @@ layui.define('jquery', function(exports){
|
|||
|
||||
barElem[0] ? barElem.before(li) : titElem.append(li);
|
||||
contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>');
|
||||
call.hideTabMore(true);
|
||||
call.tabAuto();
|
||||
// call.hideTabMore(true);
|
||||
// 是否添加即切换
|
||||
options.change && this.tabChange(filter, options.id);
|
||||
call.tabAuto(options.change);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
@ -180,19 +182,22 @@ layui.define('jquery', function(exports){
|
|||
}
|
||||
|
||||
// Tab 自适应
|
||||
,tabAuto: function(){
|
||||
var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar'
|
||||
,CLOSE = 'layui-tab-close', that = this;
|
||||
,tabAuto: function(spread){
|
||||
var SCROLL = 'layui-tab-scroll';
|
||||
var MORE = 'layui-tab-more';
|
||||
var BAR = 'layui-tab-bar';
|
||||
var CLOSE = 'layui-tab-close';
|
||||
var that = this;
|
||||
|
||||
$('.layui-tab').each(function(){
|
||||
var othis = $(this)
|
||||
,title = othis.children('.layui-tab-title')
|
||||
,item = othis.children('.layui-tab-content').children('.layui-tab-item')
|
||||
,STOPE = 'lay-stope="tabmore"'
|
||||
,span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>');
|
||||
var othis = $(this);
|
||||
var title = othis.children('.layui-tab-title');
|
||||
var item = othis.children('.layui-tab-content').children('.layui-tab-item');
|
||||
var STOPE = 'lay-stope="tabmore"';
|
||||
var span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>');
|
||||
|
||||
if(that === window && device.ie != 8){
|
||||
call.hideTabMore(true)
|
||||
// call.hideTabMore(true)
|
||||
}
|
||||
|
||||
// 开启关闭图标
|
||||
|
@ -210,16 +215,24 @@ layui.define('jquery', function(exports){
|
|||
if(typeof othis.attr('lay-unauto') === 'string') return;
|
||||
|
||||
// 响应式
|
||||
if(title.prop('scrollWidth') > title.outerWidth()+1){
|
||||
if(
|
||||
title.prop('scrollWidth') > title.outerWidth() + 1 ||
|
||||
title.height() > title.find('li').eq(0).height()
|
||||
){
|
||||
// 若执行是来自于切换,则自动展开
|
||||
spread && title.addClass(MORE);
|
||||
|
||||
if(title.find('.'+BAR)[0]) return;
|
||||
title.append(span);
|
||||
othis.attr('overflow', '');
|
||||
|
||||
// 展开图标事件
|
||||
span.on('click', function(e){
|
||||
title[this.title ? 'removeClass' : 'addClass'](MORE);
|
||||
this.title = this.title ? '' : '收缩';
|
||||
var isSpread = title.hasClass(MORE);
|
||||
title[isSpread ? 'removeClass' : 'addClass'](MORE);
|
||||
});
|
||||
} else {
|
||||
title.find('.'+BAR).remove();
|
||||
title.find('.'+ BAR).remove();
|
||||
othis.removeAttr('overflow');
|
||||
}
|
||||
});
|
||||
|
@ -530,7 +543,7 @@ layui.define('jquery', function(exports){
|
|||
});
|
||||
|
||||
dom.on('click', '.layui-tab-title li', call.tabClick); // Tab 切换
|
||||
dom.on('click', call.hideTabMore); // 隐藏展开的 Tab
|
||||
// dom.on('click', call.hideTabMore); // 隐藏展开的 Tab
|
||||
$(window).on('resize', call.tabAuto); // 自适应
|
||||
|
||||
exports(MOD_NAME, element);
|
||||
|
|
|
@ -2817,6 +2817,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
}
|
||||
})
|
||||
} else {
|
||||
cols = layui.isArray(cols) ? cols : [cols];
|
||||
layui.each(cols, function (i1, item1) {
|
||||
that.eachCols(function (i2, item2) {
|
||||
if (item1.field === item2.field) {
|
||||
|
|
|
@ -64,7 +64,7 @@ layui.define('jquery', function(exports){
|
|||
// 设置 bar 相关属性
|
||||
elemBar.addClass(item.icon).attr({
|
||||
'lay-type': item.type,
|
||||
'style': item.style || ('background-color: '+ options.bgcolor || '')
|
||||
'style': item.style || (options.bgcolor ? 'background-color: '+ options.bgcolor : '')
|
||||
}).html(item.content);
|
||||
|
||||
// bar 点击事件
|
||||
|
|
Loading…
Reference in New Issue