zTab
zTab是一个layui多标签页插件,仿照了layuiAdmin的iframe版Tab实现
当前版本v1.0
码云地址:https://gitee.com/sushengbuyu/zTab
在线预览:http://47.96.138.120/manage/
使用说明:
1、复制static/layui/mymodules下的zTab文件夹到你的layui第三方模块的目录中
2、在layui.js中加入如下代码
layui.config({ base: '/static/layui/mymodules/' //假设这是你存放拓展模块的根目录 }).extend({ //设定模块别名 tab: 'zTab/zTab' });
3、html代码如下
<div class="layui-side layui-side-menu"> <div class="layui-side-scroll"> <div class="layui-logo">zTab</div> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li v-for="menu in menus" class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:void(0);" v-text="menu.name"></a> <dl v-if="menu.type === 0" v-for="child in menu.childs" class="layui-nav-child"> <dd> <a :lay-href="child.url" v-text="child.name" href="javascript:;"></a> </dd> </dl> </li> </ul> </div> </div> <div id="tabs"></div> <div id="tabs-body" class="layui-body">
4、js代码如下
layui.use('tab', function () { var tab = layui.tab; tab.init('#tabs', { index: { url: 'content_index.html' } }); for(var i=0;i<50;i++){ tab.addTab({ id: i, title: 'Tab'+i, type: 'html', content: '<h1>aa'+ i +'</h1>', url: '/manage/user'+ i +'.html' }); } // console.log("Tab初始化完成"); });
说明:
如Tab组所在的元素设置ID为tabs
则Tab内容所在的元素ID必须为tabs-body
组件会自动监听页面中带有lay-href属性的a标签的点击事件,自动创建新的Tab
id自动设为lay-href的值,类型为iframe
zTab函数说明:
init(select, option): 初始化函数 参数说明: select: "#tabs" //Tab组所在的元素 使用jquery选择器语法 option: { //初始化参数 index: { //首页初始化参数 id: "index", //默认值为"index",不可修改 close: false, //是否可关闭 type: 'iframe', //默认为iframe['text','html','iframe'] title: '', //标题 content: '', //内容 type为text、html时必填 url: '', //url type为iframe时必填 icon: 'layui-icon-home' //图标 目前仅支持layui图标 } } addTab(tab): 新增Tab页 参数说明: tab: { id: "", //唯一主键,不可为空 close: true, //是否可关闭,默认为true type: 'iframe', //默认为iframe,['text','html','iframe'] title: '', //标题 content: '', //内容 type为text、html时必填 url: '', //url type为iframe时必填 icon: '' //图标 目前仅支持layui图标 } close(id): 关闭指定Tab 参数说明: id: "tab1" //Tab id closeAll(): 关闭所有Tab(close为false的不会关闭) 无参数 closeOthers(id): 关闭其他Tab(close为false的不会关闭) 参数说明: id: "tab1" //Tab id