index模块

74 阅读2分钟

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"