一步步实现 layui 左侧导航与右侧内容 tab 结合切换特效

二叶草 2020年3月9日22:31:04前端框架评论2阅读模式

今天第一天接触layui,花了一下午做好个雏形,看着整体挺简洁的,就来试一把。可是我发现有个瑕疵(我是一个有洁癖的人,容不得半点沙子),如下图

一步步实现 layui 左侧导航与右侧内容 tab 结合切换特效

大家发现了没,当前的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、回到之前说的问题,怎么办?自己动手解决呗。。。

搜索了官方文档
一步步实现 layui 左侧导航与右侧内容 tab 结合切换特效 
有个监听事件,这个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");
}
});


大功告成,看下最终效果

一步步实现 layui 左侧导航与右侧内容 tab 结合切换特效

本文来源于:一步步实现 layui 左侧导航与右侧内容 tab 结合切换特效-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
Go语言接口规则 前端框架

Go语言接口规则

Go语言接口规则 接口是一个或多个方法签名的集合。任何类型的方法集中只要拥有该接口对应的全部方法签名。就表示它 "实现" 了该接口,无须在该类型上显式声明实现了哪个接口。对应方法,是指有相同名称、参数...
Go语言中处理 HTTP 服务器 前端框架

Go语言中处理 HTTP 服务器

1 概述 包 net/http 提供了HTTP服务器端和客户端的实现。本文说明关于服务器端的部分。 快速开始: package main import (   "log"   "net/http" )...

发表评论