mirror of
https://gitee.com/layui/layui.git
synced 2026-01-28 19:11:26 +08:00
3.2 KiB
3.2 KiB
- Tab1
- Tab2
- Tab3
- Tab4
- Tab5
- Tab6
Tab Content-1
Tab Content-2
Tab Content-3
Tab Content-4
Tab Content-5
Tab Content-6
🔔 操作提示：在「标签头部」点击鼠标右键，可开启标签操作的更多实用演示
切换到：Tab3
切换到：第 2 项
关闭：Tab4
关闭：第 2 项
添加 Tab
<script>
layui.use(function() {
var $ = layui.$;
var tabs = layui.tabs;
var util = layui.util;
var dropdown = layui.dropdown;
// 为标签头添加上下文菜单
var dropdownInst = dropdown.render({
elem: '#demoTabs1 .layui-tabs-header>li',
trigger: 'contextmenu',
data: [{
title: '在右侧新增标签页',
action: 'add',
mode: 'after'
}, {
type: '-'
}, {
title: '关闭',
action: 'close',
mode: 'this',
}, {
title: '关闭其他标签页',
action: 'close',
mode: 'other'
}, {
title: '关闭右侧标签页',
action: 'close',
mode: 'right'
}, {
title: '关闭所有标签页',
action: 'close',
mode: 'all'
}],
click: function(data, othis, event) {
var index = this.elem.index(); // 获取活动标签索引
// 新增标签操作
if (data.action === 'add') {
// 在当前活动标签右侧新增标签页
addTabs({
mode: data.mode,
index: index
});
} else if(data.action === 'close') { // 关闭标签操作
if (data.mode === 'this') {
tabs.close('demoTabs1', index); // 关闭当前标签
} else {
tabs.closeMult('demoTabs1', data.mode, index); // 批量关闭标签
}
}
}
});
// 新增随机标签
var addTabs = function(opts) {
var n = Math.random()*1000 | 0; // 演示标记
opts = $.extend({
title: 'New Tab '+ n, // 此处加 n 仅为演示区分，实际应用不需要
content: 'New Tab Content '+ n,
id: 'new-'+ n,
aaa: 'attr-'+ n, // 自定义属性，其中 aaa 可任意命名
done: function(params) {
console.log(params);
dropdownInst.reload();
}
}, opts);
// 添加标签到最后
tabs.add('demoTabs1', opts);
}
// 自定义事件
util.on({
add: function(){
addTabs();
}
});
});