2.1.加载默认主页
layui.use(['index'], function () {
var index = layui.index;
index.loadHome({
menuPath: 'page/console/console.html',
menuName: '<i class="layui-icon layui-icon-home"></i>',
loadSetting: true,
onlyLast: false
});
});
- menuPath 必填 主页路径
- menuName 必填 Tab标题
- loadSetting 非必填 是否恢复记忆的Tab,默认为true
- onlyLast 非必填 是否仅恢复最后一个Tab,默认为false
index.loadHome()方法在index.html中调用即可。
2.2.打开新的页签
使用js的方式:
index.openTab({
title: '百度',
url: 'https://www.baidu.com',
end: function() {
// insTb.reload();
}
});
- title 选项卡的标题
- url 打开的页面地址
- end Tab关闭的回调事件(非必填)
在页面中使用:
<a ew-href="xxx.html">XXX</a>
<a ew-href="xxx.html" ew-title="XXX管理">XXX</a>
<a ew-href="xxx.html" ew-title="<i class='layui-icon layui-icon-key'></i>XXX管理">XXX</a>
注意:单标签模式下end回调无效,ew-title支持写html(图标等)。
2.3.关闭指定页签
关闭已经打开的Tab选项卡,参数是Tab的url,单标签模式下此方法无效。
index.closeTab('xxx/xxx.html');
admin.closeThisTabs(); // 关闭当前选中的选项卡
在html里面使用:
<a ew-event="closeThisTabs">关闭</a>
2.4.清除页签记忆
index.clearTabCache();
Tab记忆功能是刷新页面的时候可以恢复上次打开的所有Tab,此方法用于清除已经缓存的Tab。
注意:在实际项目中,登录成功后应该调用此方法清除Tab记忆
2.5.修改页签标题
index.setTabTitle('Hello'); // 修改当前Tab标题文字,也支持单标签模式
index.setTabTitle(title, tabId); // 修改指定Tab标题文字,单标签模式始终是修改当前
index.setTabTitleHtml('<span>Hello</span>'); // 修改整个标题栏的html,只在单标签模式有效
index.setTabTitleHtml(); // 隐藏单标签模式的标题栏
关闭多标签时框架会自动生成一个标题栏,可使用此方法修改标题栏内容,参数为undefined时为隐藏标题栏。
2.6.页签切换刷新
默认是关闭的,在设置界面可开启,如果要默认开启在common.js配置。
如果在common.js配置不起作用,在index.html里面加入js:
if (layui.admin.setter.pageTabs && layui.admin.setter.tabAutoRefresh == true)
$('.layui-layout-admin>.layui-body>.layui-tab').attr('lay-autoRefresh', 'true');
自定义每个子页面的切换刷新方法,在子页面中添加js:
window.refreshTab = function() {
insTb.reload();
}
2.7.侧栏互斥展开
在layui-nav-tree上面增加lay-shrink="_all"配置即可展开菜单时收缩兄弟节点:
<!-- 侧边栏 -->
<div class="layui-side">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-shrink="_all">
......省略其他部分
</ul>
</div>
</div>
注意:是 _all 而不是 all ,在3.1.6版本之前是lay-accordion="true"