layui_03动态选项卡Tab&iframe使用

朱琳均

已于 2023-07-13 13:34:44 修改

阅读量299

点赞数

文章标签： layui 前端 javascript

于 2023-07-12 22:48:50 首次发布

本文链接：https://blog.csdn.net/weixin_73471776/article/details/131691848

版权

文章描述了一种使用layui框架实现选项卡功能的方法，包括将静态选项卡转换为动态，菜单标签与实际菜单名对应，处理重名选项卡的逻辑，以及在用户登录后的页面跳转和权限菜单加载。代码示例展示了如何动态生成菜单结构并添加点击事件来打开选项卡。

摘要由CSDN通过智能技术生成

实现选项卡功能，调整项目结构

实现选项卡功能，调整项目结构

1.参考官网是否有空件/模块能够支撑完成对应工能-静态
2.将静态的选项卡转化成动态的选项卡
3.将选项卡的标签名变成实际菜单名
4.重名的选项卡不能打开新的
5.重名选项卡需要被选中
6.调整

layui.use(['layer','jquery'], function(){
  var layer = layui.layer;
  let  $ =  layui.jquery;
  $("#login").click(function(){
	  $.ajax({
		 url:'user.action?methodName=login', 
			 dataType:'json',
			 data:{
				 loginName:$("#username").val(),
				 pwd:$("#password").val()
			 },
			 method:'post',
			 success:function(data){
				 if(data){
					 layer.alert(''+data.name+'登陆成功', {icon: 6});
					 location.href='main.jsp';
				 }else{
					 layer.alert('账户密码错误', {icon: 5});
				 }
			 }
	  });
  });
});

var element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
  element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  $.ajax({
	  url:"permission.action?methodName=menus",
			  dataType:'json',
			  success:function(data){
				  console.log(data);
				  var htmlStr='';
				  $.each(data,function(i,n){
					  htmlStr+='<li class="layui-nav-item layui-nav-itemed">';
					  htmlStr+='<a class="" href="javascript:;">'+n.text+'</a>';
					  if(n.hasChildren){
						  var children=n.children;
						  htmlStr+='<dl class="layui-nav-child">';
						  $.each(children,function(idx,node){
							  htmlStr+='<dd><a href="javascript:;" onclick="opendTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
							  })
					      htmlStr+='</dl>';
					  }
					  htmlStr+='</li>' 
				  });
				  $("#menu").html(htmlStr);
				  element.render('menu');
			  }
  });
  });
/**
 * 1.参考官网是否有空件/模块能够支撑完成对应工能-静态
 * 2.将静态的选项卡转化成动态的选项卡
 * 3.将选项卡的标签名变成实际菜单名
 * 4.重名的选项卡不能打开新的 
 * 5.重名选项卡需要被选中
 */
function opendTab(title,content,id){
	var $node=$('li[lay-id="'+id+'"]');
	console.log($node);
   if($node.length==0){
	   element.tabAdd('demo', {
	        title: title //用于演示
	        ,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
	        ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	      })
   }
   element.tabChange('demo',id); //切换到：用户管理
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="static/js/login.js"></script>
 <link rel="stylesheet" rev="stylesheet" href="static/css/iconfont.css" type="text/css" media="all">
        <link rel="stylesheet" rev="stylesheet" href="static/css/login.css" type="text/css" media="all">
        <style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}</style>
</head>
<body class="tx-login-bg">
        <div class="tx-login-box">
            <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
				<ul class="tx-form-li row">
					<li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li>
					<li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li>
					<li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li>
					<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li>
					<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li>
				</ul>
            </div>

    </body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台主页</title>
<script src="static/js/main.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->              
 
<div class="layui-tab" lay-filter="demo" 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>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
</body>
</html>

朱琳均

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui_03动态选项卡Tab&iframe使用

1.参考官网是否有空件/模块能够支撑完成对应工能-静态。2.将静态的选项卡转化成动态的选项卡。3.将选项卡的标签名变成实际菜单名。4.重名的选项卡不能打开新的。实现选项卡功能，调整项目结构。5.重名选项卡需要被选中。
复制链接

扫一扫