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

LayUI选项卡改进

在前两篇文章中,解决了创建选项卡与加载页面的问题。

问题:官方文档中使用var active{}触发事件,不知道为啥我的不行(才入门第二天..小声BB

所以我使用了element.on(‘nav(leftList)’, function(e) {})触发事件,正是由于该方法,在点击导航时,回无限创建新的选项卡。

解决:加一个判断即可。查询该lay-id的<li>的长度,如果大于0也就是存在该tab,直接切换。否则创建。

代码如下:

<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:' + tabId)
				
				var isActive = $('.layui-tab-title').find("li[lay-id=" + tabId + "]");
				if (isActive.length > 0) {
					//存在当前tab
					element.tabChange('tabDemo',tabId)
				}
				else{
					//新增一个Tab项
					element.tabAdd('tabDemo', {
						title : con,
						content : '<iframe src="/admin/'+url+'" style="width:100%;height:100%;" frameborder="0" ></iframe>',
						id : tabId
					})
				}
				
			})
		});
	</script>

 

 

打赏
2019-01-16
72 阅读
关键字:
暂无评论

发表评论