左侧导航与右侧内容 tab 结合切换特效

分享 未结 精帖
46 7789
小洋
小洋 2017-12-14
悬赏:20飞吻
今天第一天接触layui,花了一下午做好个雏形,看着整体挺简洁的,就来试一把。可是我发现有个瑕疵(我是一个有洁癖的人,容不得半点沙子),如下图



大家发现了没,当前的tab是在“用户管理”,而左侧的菜单却是在“作者网站”,这让我很不爽。我搜了文档、社区和现在已经做好的案例里,没有一个解决这个问题的。我之前接触过很多前端框架,基本没有这种问题。

1、首先左侧菜单,右侧内容,整体无刷新我是这么做的
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;"><i class="layui-icon" style="margin-right: 5px"></i>系统管理</a>
<dl class="layui-nav-child">
<dd id="S001" name="form.html"><a href="javascript:;">用户管理</a></dd>
<dd id="S002" name=""><a href="javascript:;">角色管理</a></dd>
<dd id="S003" name=""><a href="javascript:;">部门管理</a></dd>
<dd id="S004" name="http://www.shuyangyang.com.cn"><a href="javascript:;">作者网站</a></dd>
</dl>
</li>
节点上用id来作为编号,name是需要跳转的页面地址,下面用监听来判断

var element;
var $;
layui.use(['element','jquery'],function(){
element = layui.element;
$ = layui.jquery;
//监听左侧菜单点击
element.on('nav(left-menu)', function(elem){
addTab(elem[0].innerText,elem[0].attributes[1].nodeValue,elem[0].id);
});
});
/**
* 新增tab选项卡,如果已经存在则打开已经存在的,不存在则新增
* @param tabTitle 选项卡标题名称
* @param tabUrl 选项卡链接的页面URL
* @param tabId 选项卡id
*/
function addTab(tabTitle,tabUrl,tabId){
if ($(".layui-tab-title li[lay-id=" + tabId + "]").length > 0) {
element.tabChange('tab-switch', tabId);
}else{
element.tabAdd('tab-switch', {
title: tabTitle
,content: '<iframe src='+tabUrl+' width="100%" style="min-height: 450px" frameborder="0" scrolling="auto" onload="setIframeHeight(this)"></iframe>' // 选项卡内容,支持传入html
,id: tabId //选项卡标题的lay-id属性值
});
element.tabChange('tab-switch', tabId); //切换到新增的tab上
}
}

/**
* ifrme自适应页面高度,需要设定min-height
* @param iframe
*/
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
大家看明白了吧,用了一个iframe来实现。然后js判断是否已经打开,没打开就创建一个tab,打开就打开已经存在的tab.

2、回到之前说的问题,怎么办?自己动手解决呗。。。

搜索了官方文档

有个监听事件,这个elem当前对象我打印出来了,控制台一堆,我找了半天,结合jq的操作,终于搞定。

主要思路,根据当前获取点击的tab的id,然后寻找左侧菜单相对应的id(因为我前面左侧菜单点击打开iframe传入的id生成tab是一样的),这就好办了,点击清除左侧所有"layui-this"样式。然后寻找相同id的节点加上“layui-this”样式。
//监听tab选项卡切换
element.on('tab(tab-switch)', function(data){
if(data.elem.context.attributes != undefined){
var id = data.elem.context.attributes[0].nodeValue;
layui.each($(".layui-nav-child"), function () {
$(this).find("dd").removeClass("layui-this");
});
$("#"+id).attr("class","layui-this");
}
});

大功告成,看下最终效果



鉴于大家都想要源码,这里附上: http://www.shuyangyang.com.cn/zuopinchouti/chengxuyuanma/2017-12-15/263.html
回帖
本帖已设置禁止回复