mtjmtj7的小站
mtjmtj7的小站
© mtjmtj7
All Rights Reserved.

LayUI创建选项卡

官方demohttps://www.layui.com/demo/tab.html

 

1,首先导航处,要增加属性data-type=”tabAdd”,如下:

	<ul class="layui-nav layui-nav-tree" lay-filter="leftList" th:fragment="leftList">
	  <li class="layui-nav-item"><a href="#" data-url="a" id="userManage" data-type="tabAdd">注册用户管理</a></li>
	  <li class="layui-nav-item"><a href="#" data-url="b" id="userSearch" data-type="tabAdd">注册用户查询</a></li>
	 <li class="layui-nav-item"><a href="#" data-url="c"  id="userAnalysis" data-type="tabAdd">数据分析</a></li>
	</ul>

2,初始选项卡如下:

           <div class="layui-tab" lay-filter="tabDemo" lay-allowclose="true">
		<ul class="layui-tab-title">
		    <li class="layui-this" lay-id="11">网站设置</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">内容1</div>
		</div>
	    </div>

此时注意<div>中的lay-filter

3,js代码如下:

<script type="text/javascript">
		layui.use('element', function() {
			var $ = layui.jquery;
			var element = layui.element;
			//触发事件
			element.on('nav(leftList)', function(e) {
				//取值
				var con = e.text();
				var tabId = e.attr("id");
				var url = e.attr("data-url");
				console.log('log' + url +'/' + tabId + '/' + con)
				//新增一个Tab项
				element.tabAdd('tabDemo', {
					title : con,
					content : '内容也可以是iframe',
					id : tabId
				})
			})
		});
	</script>

4,效果图如下:

打赏
2019-01-16
65 阅读
暂无评论

发表评论