AI 助理
备案控制台
开发者社区 云计算 文章 正文

layui--03

2023-10-24 41
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： layui--03

目录：

1.什么是选项卡：

在layui中，选项卡（Tab）是一种常用的页面布局元素，用于在同一页面上展示多个内容区域并切换显示。选项卡通常由一组水平或垂直的标签（Tab）和对应的内容区域组成。

在layui中，可以使用element模块的tab方法来实现选项卡功能。具体使用步骤如下：

通过下面这些代码可以形成一个简单的选项卡：

  1. 引入layui库文件和相关样式：
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

2.创建HTML结构，定义标签和内容区域：

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">Tab1</li>
    <li>Tab2</li>
    <li>Tab3</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
  </div>
</div>

3.调用layui的选项卡方法进行初始化：

layui.use(['element'], function(){
  var element = layui.element;
  // 初始化选项卡
  element.tab();
});

2.layui选项卡：

1.把选项卡嵌入到项目里面（还没有优化的        ）：

<%@ 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>
</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>
    <li lay-id="22">用户管理</li>
    <li lay-id="33">权限分配</li>
    <li lay-id="44">商品管理</li>
    <li lay-id="55">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  $.ajax({
   url:"${pageContext.request.contextPath }/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:;">'+node.text+'</a></dd>';
             })
             htmlStr +='  </dl>';
           }
           htmlStr +=' </li>';
         })
         $("#menu").html(htmlStr);
         element.render('menu');
       }
  });
});
</script>
</body>
</html>

输出结果：

1. 将静态的选项卡转换为动态的选项卡:

2.将选项卡的标签名变成实际菜单名 :

htmlStr +='  
<dd>
<a href="javascript:;"  onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">
'+node.text+'</a></dd>';

3.重名的选项卡不能打开新的:

                     if($node.length == 0){
                       //将静态的选项卡转换为动态的选项卡
             element.tabAdd('demo', {
                  title: title //用于演示
                  ,content: content
                  ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
                })
           }

4.重名选项卡需要未选中:

如果这张表有很多字段，就用map集合,把当前表对应的数据放进map集合里面 :

 

所有代码：

<%@ 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>
</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">
    <!-- 内容主体区域 -->
<!--  3.将选项卡的标签名变成实际菜单名
 -->
 <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>
<script>
//JS 
var element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  $.ajax({
   url:"${pageContext.request.contextPath }/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){
              // 3.将选项卡的标签名变成实际菜单名
 htmlStr +='  <dd><a href="javascript:;"  onclick="openTab(\''+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 openTab(title,content,id){
          var $node = $('li[lay-id="'+id+'"]');
          console.log($node);
/*          4.重名的选项卡不能打开新的
 */          
                     if($node.length == 0){
                       //将静态的选项卡转换为动态的选项卡
             element.tabAdd('demo', {
                  title: title //用于演示
                  ,content: content
                  ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
                })
           }
                 /* 5.重名选项卡需要未选中 */
           element.tabChange('demo', id); //切换到：用户管理
}
</script>
</body>
</html>

输出结果：

3.项目重构：

先建立一个login.js和main.js:

再把login.jsp里面的内容复制到login.js:

 

再把main.jsp里面的内容复制到main.js:

 

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){
              // 3.将选项卡的标签名变成实际菜单名
 htmlStr +='  <dd><a href="javascript:;"  onclick="openTab(\''+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 openTab(title,content,id){
          var $node = $('li[lay-id="'+id+'"]');
          console.log($node);
/*          4.重名的选项卡不能打开新的
 */          
                     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，这里以时间戳模拟下
                })
           }
                 /* 5.重名选项卡需要未选中 */
           element.tabChange('demo', id); //切换到：用户管理
}

输出结果：

bing人
目录
相关文章
讓丄帝愛伱
layui修改窗口标题
layui修改窗口标题
讓丄帝愛伱
131 0
君临沂
|
前端开发 JavaScript API
Layui的入门
Layui的入门
君临沂
113 0
code袁
|
6月前
|
前端开发
layui-form
`layui-form`是一个前端表单组件，提供多种表单类型如单行、多行排列的输入框，下拉选择框（支持模糊搜索），单选框和复选框。表单元素可通过`required`和`lay-verify`属性进行必填和验证设置。编辑器如`layedit`可用于富文本输入，表单监听事件如提交和单选器可绑定回调函数进行处理。此外，能动态更新渲染表单，初始化表单数据并进行数据校验，包括自定义验证规则。
code袁
70 1
爱敲代码的小黄
|
6月前
【Layui】Layui下select下拉框不显示或没有效果
【Layui】Layui下select下拉框不显示或没有效果
爱敲代码的小黄
426 0
bing人
|
前端开发 JavaScript API
layui--02
layui--02
bing人
66 0
讓丄帝愛伱
|
容器
layui-table 多一列问题
layui-table 多一列问题
讓丄帝愛伱
173 0
匿瘾
|
前端开发 JavaScript 搜索推荐
layui入门
layui入门
匿瘾
66 0
朱琳均
|
11月前
|
前端开发 JavaScript 开发者
layui01
layui01
朱琳均
50 0
姿势不太差
|
11月前
|
前端开发 JavaScript 开发者
Layui 简单介绍及入门
Layui 简单介绍及入门
姿势不太差
87 0
懒大王o
|
11月前
|
前端开发 JavaScript 开发者
Layui(入门)
Layui(入门)
懒大王o
88 0