LayUI选项卡改进 |mtjmtj7的小站

mtjmtj7的小站

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>

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

25 阅读

其他, LayUI

关键字: Layui

暂无评论

LayUI选项卡改进

发表评论