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

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

2023-10-16 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 使用.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
目录
相关文章
宁波阿成.
|
6月前
自定义Tab选项卡
自定义Tab选项卡
宁波阿成.
32 2
Love-Java.
|
12月前
|
前端开发 JavaScript Java
Layui实现动态选项卡(超详细)
Layui实现动态选项卡(超详细)
Love-Java.
194 0
无法自律的人
|
前端开发 JavaScript Java
【Layui】选项卡Tab：完美实现网页内容分类与导航
Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。
无法自律的人
412 1
Z_B_L
|
6月前
|
JavaScript 前端开发
js小功能--如何实现按住shift拖拽多选div
js小功能--如何实现按住shift拖拽多选div
Z_B_L
82 0
懒大王o
|
11月前
|
JavaScript
Layui----动态选项卡
Layui----动态选项卡
懒大王o
71 0
Layui----动态选项卡
朱琳均
|
11月前
layui_03动态选项卡Tab&iframe使用
layui_03动态选项卡Tab&iframe使用
朱琳均
58 0
默不会开发
|
12月前
|
自然语言处理 JavaScript 前端开发
LayUI之动态选项卡Tab&iframe使用
LayUI之动态选项卡Tab&iframe使用
默不会开发
386 0
嘘~！
|
12月前
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
嘘~！
477 0
不念那年晚春
|
缓存 JavaScript 前端开发
LayUI系列（三）之动态添加选项卡
LayUI系列（三）之动态添加选项卡
不念那年晚春
94 0
孤留光乩
|
JavaScript 前端开发 定位技术
LayUI动态选项卡的使用
LayUI动态选项卡的使用
孤留光乩
139 0

热门文章

最新文章

  • 1
    Object reference not set to an instance of an object.
  • 2
    Map根据键、值进行排序
  • 3
    锐捷网络&视易K米，携手助力2016腾讯全球合作伙伴万人大会
  • 4
    Java中的定时器
  • 5
    Python正则表达式指南下下半部　
  • 6
    VirtualDesktop多媒体在何处解码?
  • 7
    文件移动脚本
  • 8
    xml在此生活
  • 9
    在不动用sp_configure的情况下，如何 =》去掉列的自增长，并保留原数据
  • 10
    聚焦技术实战！MDCC 2016 移动开发者大会盛大开幕
  • 1
    2024Mysql And Redis基础与进阶操作系列（6）作者——LJS[含MySQL 多表之一对一/多；多对多；多表联合查询等详解步骤及常见报错问题所对应的解决方法]
    32
  • 2
    猫头虎分享：鸿蒙生态带给开发者的全新机遇！轻松实现按需加载与多端适配，开发效率翻倍
    31
  • 3
    2024Mysql And Redis基础与进阶操作系列（5）作者——LJS[含MySQL DQL基本查询:select；简单、排序、分组、聚合、分组、分页等详解步骤及常见报错问题所对应的解决方法]
    25
  • 4
    理解 ES6 中的 Promise
    27
  • 5
    CSS 提高性能的方法
    23
  • 6
    CSS 预编语言的区别
    10
  • 7
    如何快速掌握 CSS 预编语言
    10
  • 8
    对 CSS 预编语言的理解
    12
  • 9
    利用缓存布局信息来减少回流和重绘的发生
    12
  • 10
    减少回流和重绘的发生
    12

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月