AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

使用.LayUI实现动态选项卡Tab的强大功能

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

正文：

在Web界面开发中，动态选项卡Tab是一种常见且实用的功能。它可以让用户在页面中切换不同的内容，提供了更好的用户体验。而.LayUI作为一款流行的前端框架，提供了丰富的组件，包括可以轻松实现动态选项卡Tab的功能。在本文中，我们将学习如何使用.LayUI来创建动态选项卡Tab，并探索其强大的功能。

首先，我们需要引入.LayUI框架的相关文件。你可以从.LayUI官方网站上下载最新的框架文件，并将其引入到你的项目中。以下是一个示例的HTML代码，用于引入.LayUI框架文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/layui/css/layui.css">
    <script src="path/to/layui/layui.js"></script>
</head>
<body>
</body>
</html>
接下来，我们需要创建一个容器元素来显示选项卡。你可以使用一个div元素作为容器，并为其指定一个唯一的id用于后续的操作。以下是一个示例的HTML代码：
<body>
    <div id="tabContainer"></div>
</body>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

2.创建选项卡容器

现在，我们可以使用.LayUI的JavaScript API来初始化选项卡，并添加动态选项卡项。以下是一个使用.LayUI实现动态选项卡Tab的示例：

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </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>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

3.初始化.LayUI组件和创建选项卡项以及获取数据准备

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(index,node){
          htmlStr+=' <dd><a href="javascript:;" onclick="tabAdd(\''+node.text+'\',\''+node.attributes.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
          })
          htmlStr+='</dl>';
        }
        htmlStr+=' </li>';
      })
      $("#menu").html(htmlStr);
      element.render('menu'); 
    }
  });
});
function tabAdd(text,url,id){
     //新增一个Tab项
     var $node = $('li[lay-id="'+id+'"]');
     if($node.length == 0){
     element.tabAdd('demo', {
       title: text//用于演示
       ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
       ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
     })
     }
     element.tabChange('demo', id); //切换到：用户管理
}
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51

3.1 Permission实体类

package com.zking.entity;
public class Permission {
 private long id;
 private String name;
 private String description;
 private String url;
 private long pid;
 private int ismenu;
 private long displayno;
 public Permission() {
  // TODO Auto-generated constructor stub
}
public Permission(String name, String description, String url, long pid, int ismenu, long displayno) {
  super();
  this.name = name;
  this.description = description;
  this.url = url;
  this.pid = pid;
  this.ismenu = ismenu;
  this.displayno = displayno;
}
public long getId() {
  return id;
}
public void setId(long id) {
  this.id = id;
}
public String getName() {
  return name;
}
public void setName(String name) {
  this.name = name;
}
public String getDescription() {
  return description;
}
public void setDescription(String description) {
  this.description = description;
}
public String getUrl() {
  return url;
}
public void setUrl(String url) {
  this.url = url;
}
public long getPid() {
  return pid;
}
public void setPid(long pid) {
  this.pid = pid;
}
public int getIsmenu() {
  return ismenu;
}
public void setIsmenu(int ismenu) {
  this.ismenu = ismenu;
}
public long getDisplayno() {
  return displayno;
}
public void setDisplayno(long displayno) {
  this.displayno = displayno;
}
public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
  super();
  this.id = id;
  this.name = name;
  this.description = description;
  this.url = url;
  this.pid = pid;
  this.ismenu = ismenu;
  this.displayno = displayno;
}
@Override
public String toString() {
  return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid=" + pid
      + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
}
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102

3.2 PermissionDao类

package com.zking.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
public class PermissionDao extends BaseDao<Permission> {
  public List<Permission> QueryAll(Permission permission,PageBean pagebean) throws Exception {
    String sql = "select * from t_oa_permission";
    return super.executeQuery(sql, Permission.class, pagebean);
  }
  public List<TreeVo<Permission>> menus(Permission permission,PageBean pagebean) throws Exception{
    List<TreeVo<Permission>> lst = new ArrayList<TreeVo<Permission>>();
    List<Permission> list = this.QueryAll(permission, pagebean);
    for (Permission p : list) {
      TreeVo<Permission> tv = new TreeVo<Permission>();
      tv.setId(p.getId()+"");
      tv.setText(p.getName());
      tv.setParentId(p.getPid()+"");
      Map<String, Object> map = new HashMap<String, Object>();
      map.put("skyl",p);
      tv.setAttributes(map);
      lst.add(tv);
    }
    return BuildTree.buildList(lst,"-1");
  }
  public static void main(String[] args) {
    try {
      List<TreeVo<Permission>> menus = new PermissionDao().menus(null, null);
      ObjectMapper om  = new ObjectMapper();
      System.out.println(om.writeValueAsString(menus));
    } catch (Exception e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
  }
}
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52

3.3 TreeVo类

package com.zking.util;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class TreeVo<T> {
  /**
   * 节点ID
   */
  private String id;
  /**
   * 显示节点文本
   */
  private String text;
  /**
   * 节点状态，open closed
   */
  private Map<String, Object> state;
  /**
   * 节点是否被选中 true false
   */
  private boolean checked = false;
  /**
   * 节点属性
   */
  private Map<String, Object> attributes;
  /**
   * 节点的子节点
   */
  private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
  /**
   * 父ID
   */
  private String parentId;
  /**
   * 是否有父节点
   */
  private boolean hasParent = false;
  /**
   * 是否有子节点
   */
  private boolean hasChildren = false;
  public String getId() {
    return id;
  }
  public void setId(String id) {
    this.id = id;
  }
  public String getText() {
    return text;
  }
  public void setText(String text) {
    this.text = text;
  }
  public Map<String, Object> getState() {
    return state;
  }
  public void setState(Map<String, Object> state) {
    this.state = state;
  }
  public boolean isChecked() {
    return checked;
  }
  public void setChecked(boolean checked) {
    this.checked = checked;
  }
  public Map<String, Object> getAttributes() {
    return attributes;
  }
  public void setAttributes(Map<String, Object> attributes) {
    this.attributes = attributes;
  }
  public List<TreeVo<T>> getChildren() {
    return children;
  }
  public void setChildren(List<TreeVo<T>> children) {
    this.children = children;
  }
  public boolean isHasParent() {
    return hasParent;
  }
  public void setHasParent(boolean isParent) {
    this.hasParent = isParent;
  }
  public boolean isHasChildren() {
    return hasChildren;
  }
  public void setChildren(boolean isChildren) {
    this.hasChildren = isChildren;
  }
  public String getParentId() {
    return parentId;
  }
  public void setParentId(String parentId) {
    this.parentId = parentId;
  }
  public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
    super();
    this.id = id;
    this.text = text;
    this.state = state;
    this.checked = checked;
    this.attributes = attributes;
    this.children = children;
    this.hasParent = isParent;
    this.hasChildren = isChildren;
    this.parentId = parentID;
  }
  public TreeVo() {
    super();
  }
}
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138

3.4 PermissionAction类

该类继承了ActionSupport类并且实现了ModelDriver接口
• 1
package com.zking.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.PermissionDao;
import com.zking.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;
public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {
  private Permission p = new Permission();
  private PermissionDao pd = new PermissionDao();
  public void menus(HttpServletRequest req, HttpServletResponse resp) {
    try {
      List<TreeVo<Permission>> menus = pd.menus(null, null);
      ResponseUtil.writeJson(resp, menus);
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
  @Override
  public Permission getModel() {
    // TODO Auto-generated method stub
    return p;
  }
}
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

4.监听选项卡的切换事件

element.tabChange('demo', id); //切换到：用户管理
• 1

5.运行和测试

如此简单，我们就成功地使用.LayUI实现了动态选项卡Tab的功能！你可以根据需要添加更多的选项卡项，并在其中放置自己的内容。此外，.LayUI还提供了其他丰富的方法和事件，可以根据你的项目需求进行定制和扩展。

6.总结：

通过本文，我们了解了如何使用.LayUI来创建动态选项卡Tab，并展示了其强大的功能。借助.LayUI框架提供的丰富组件和灵活的API，我们可以轻松实现动态选项卡Tab，为用户提供更好的使用体验。希望这篇博客对你有所帮助，祝你在Web开发中取得成功！


文章标签：
前端开发
API
JavaScript
容器
UED
i46usca74mzt4
目录
相关文章
宁波阿成.
|
7月前
自定义Tab选项卡
自定义Tab选项卡
宁波阿成.
38 2
Love-Java.
|
前端开发 JavaScript Java
Layui实现动态选项卡(超详细)
Layui实现动态选项卡(超详细)
Love-Java.
219 0
无法自律的人
|
前端开发 JavaScript Java
【Layui】选项卡Tab：完美实现网页内容分类与导航
Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。
无法自律的人
464 1
Z_B_L
|
7月前
|
JavaScript 前端开发
js小功能--如何实现按住shift拖拽多选div
js小功能--如何实现按住shift拖拽多选div
Z_B_L
106 0
懒大王o
|
JavaScript
Layui----动态选项卡
Layui----动态选项卡
懒大王o
85 0
Layui----动态选项卡
朱琳均
layui_03动态选项卡Tab&iframe使用
layui_03动态选项卡Tab&iframe使用
朱琳均
68 0
默不会开发
|
自然语言处理 JavaScript 前端开发
LayUI之动态选项卡Tab&iframe使用
LayUI之动态选项卡Tab&iframe使用
默不会开发
423 0
讓丄帝愛伱
EasyUI中datagrid的行编辑模式中，找到特定的Editor，并为其添加事件
EasyUI中datagrid的行编辑模式中，找到特定的Editor，并为其添加事件
讓丄帝愛伱
294 0
孤留光乩
|
JavaScript 前端开发 定位技术
LayUI动态选项卡的使用
LayUI动态选项卡的使用
孤留光乩
157 0
不念那年晚春
|
缓存 JavaScript 前端开发
LayUI系列（三）之动态添加选项卡
LayUI系列（三）之动态添加选项卡
不念那年晚春
118 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    54
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    111
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    40
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    43
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    47
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    33
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    110
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    272
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    161
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    41

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    DataWorks售前咨询