- 实现选项卡功能，调整项目结构
实现选项卡功能，调整项目结构
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>
