• Layui快速入门之第六节 选项卡

    目录

    一：基本概念

    选项卡依赖element模块

    API

    元素属性

    基本使用：

    二：选项卡风格

    默认风格

    简约风格 

    ​编辑

    卡片风格

    三：hash 状态匹配

    四：tab相关操作

    渲染 tab

    添加 tab

    删除 tab

    切换 tab

    自定义 tab

    五：事件

    tab 切换事件

    tab 删除事件

    一：基本概念

                 选项卡组件 tab 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中，tab 组件属于 element 模块的子集

    使用：需要加载导航模块，也需要引入核心的js文件

    选项卡依赖element模块

    1. <script type="text/javascript">
    2.     //选项卡依赖element模块
    3.     layui.use('element',function(){
    4.         var element = layui.element;
    5.     });
    6. script>

    API

    API描述
    var element = layui.element获得 element 模块。
    element.render('tab', filter)渲染 tab 组件
    element.tabAdd(filter, options)添加 tab 选项
    element.tabDelete(filter, layid)删除 tab 选项
    element.tabChange(filter, layid)切换 tab 选项
    element.tab(options)绑定自定义 tab 元素

    元素属性

    属性描述
    lay-allowclose是否开启删除图标。设置在 tab 容器 
       上。
    lay-idtab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 
  •  元素上

    • 基本使用：

    1. <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
    2.   <ul class="layui-tab-title">
    3.     <li class="layui-this" lay-id="11">标签1li>
    4.     <li lay-id="22">标签2li>
    5.     <li lay-id="33">标签3li>
    6.     <li lay-id="44">标签4li>
    7.     <li lay-id="55">标签5li>
    8.   ul>
    9.   <div class="layui-tab-content">
    10.     <div class="layui-tab-item layui-show">内容-1div>
    11.     <div class="layui-tab-item">内容-2div>
    12.     <div class="layui-tab-item">内容-3div>
    13.     <div class="layui-tab-item">内容-4div>
    14.     <div class="layui-tab-item">内容-5div>
    15.   div>
    16. div>
    17.  
    18. <div class="layui-btn-container">
    19.   <button class="layui-btn" lay-on="tabAdd">新增 tab 项button>
    20.   <button class="layui-btn" lay-on="tabDelete">删除「标签4」button>
    21.   <button class="layui-btn" lay-on="tabChange">切换到「标签3」button>
    22. div>
    23. <script>
    24. layui.use(function(){
    25.   var element = layui.element;
    26.   var util = layui.util;
    27.   // 普通事件
    28.   util.on('lay-on', {
    29.     tabAdd: function(){
    30.       // 新增一个 tab 项
    31.       var label = (Math.random()*1000|0); // 标记 - 用于演示
    32.       element.tabAdd('test-handle', {
    33.         title: '新选项'+ label,
    34.         content: '内容-'+ label,
    35.         id: new Date().getTime() // 实际使用一般是规定好的id，这里以时间戳模拟下
    36.       })
    37.     },
    38.     tabDelete: function(othis){
    39.       // 删除指定 tab 项
    40.       element.tabDelete('test-handle', '44'); // 删除：“商品管理”
    41.       othis.addClass('layui-btn-disabled');
    42.     },
    43.     tabChange: function(){
    44.       // 切换到指定 tab 项
    45.       element.tabChange('test-handle', '33'); // 切换到：标签3
    46.     }
    47.   });
    48. });
    49. script>

    二：选项卡风格

    tab 组件提供了三种 UI 风格，分别为：

    风格className
    默认风格class="layui-tab"
    简约风格class="layui-tab layui-tab-brief"
    卡片风格class="layui-tab layui-tab-card"

    默认风格

    1. <div class="layui-tab">
    2.   <ul class="layui-tab-title">
    3.     <li class="layui-this">标签1li>
    4.     <li>标签2li>
    5.     <li>标签3li>
    6.     <li>标签4li>
    7.     <li>标签5li>
    8.   ul>
    9.   <div class="layui-tab-content">
    10.     <div class="layui-tab-item layui-show">内容-1div>
    11.     <div class="layui-tab-item">内容-2div>
    12.     <div class="layui-tab-item">内容-3div>
    13.     <div class="layui-tab-item">内容-4div>
    14.     <div class="layui-tab-item">内容-5div>
    15.   div>
    16. div>

    简约风格 

    1. <div class="layui-tab layui-tab-brief">
    2.   <ul class="layui-tab-title">
    3.     <li class="layui-this">标签1li>
    4.     <li>标签2li>
    5.     <li>标签3li>
    6.     <li>标签4li>
    7.     <li>标签5li>
    8.   ul>
    9.   <div class="layui-tab-content">
    10.     <div class="layui-tab-item layui-show">内容-1div>
    11.     <div class="layui-tab-item">内容-2div>
    12.     <div class="layui-tab-item">内容-3div>
    13.     <div class="layui-tab-item">内容-4div>
    14.     <div class="layui-tab-item">内容-5div>
    15.   div>
    16. div>

    卡片风格

    1. <div class="layui-tab layui-tab-card">
    2.   <ul class="layui-tab-title">
    3.     <li class="layui-this">标签1li>
    4.     <li>标签2li>
    5.     <li>标签3li>
    6.     <li>标签4li>
    7.     <li>标签5li>
    8.   ul>
    9.   <div class="layui-tab-content">
    10.     <div class="layui-tab-item layui-show">内容-1div>
    11.     <div class="layui-tab-item">内容-2div>
    12.     <div class="layui-tab-item">内容-3div>
    13.     <div class="layui-tab-item">内容-4div>
    14.     <div class="layui-tab-item">内容-5div>
    15.   div>
    16. div>

    三：hash 状态匹配

     切换 tab 标签项后，地址栏同步 hash 值，当页面刷新时，tab 仍保持对应的切换状态

    1. <div class="layui-tab" lay-filter="test-hash">
    2.   <ul class="layui-tab-title">
    3.     <li class="layui-this" lay-id="11">标签1li>
    4.     <li lay-id="22">标签2li>
    5.     <li lay-id="33">标签3li>
    6.     <li lay-id="44">标签4li>
    7.     <li lay-id="55">标签5li>
    8.   ul>
    9.   <div class="layui-tab-content">
    10.     <div class="layui-tab-item layui-show">内容-1div>
    11.     <div class="layui-tab-item">内容-2div>
    12.     <div class="layui-tab-item">内容-3div>
    13.     <div class="layui-tab-item">内容-4div>
    14.     <div class="layui-tab-item">内容-5div>
    15.   div>
    16. div>
    17. <script>
    18. layui.use(function(){
    19.   var element = layui.element;
    20.   
    21.   // hash 地址定位
    22.   var hashName = 'tabid'; // hash 名称
    23.   var layid = location.hash.replace(new RegExp('^#'+ hashName + '='), ''); // 获取 lay-id 值
    24.     
    25.   // 初始切换
    26.   element.tabChange('test-hash', layid);
    27.   // 切换事件
    28.   element.on('tab(test-hash)', function(obj){
    29.     location.hash = hashName +'='+ this.getAttribute('lay-id');
    30.   });
    31. });
    32. script>

    四：tab相关操作

    渲染 tab

    element.render('tab', filter);

    • 参数 'tab' 是渲染 tab 的固定值
    • 参数 filter : 对应 tab 容器 lay-filter 的属性值

          tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染，因此该方法主要用于对动态插入的 tab 元素的初始化渲染

    1. <div id="test">div>
    2. <script>
    3. layui.use(function(){
    4.   var element = layui.element;
    5.   var $ = layui.$;
    6.   // 动态插入 tab 元素
    7.   $('#test').html(`
    8.     <div class="layui-tab" lay-filter="demo-filter-tab">
    9.       
    10.     div>
    11.   `);
    12.   // 渲染 tab 组件
    13.   element.render('tab', 'demo-filter-tab');
    14. });
    15. script>

    添加 tab

    element.tabAdd(filter, options);

    • 参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
    • 参数 options : 添加 tab 时的属性可选项，见下表：
    options描述类型
    title选项卡的标题string
    content选项卡的内容，支持传入 htmlstring
    id选项卡标题元素的 lay-id 属性值string

    删除 tab

    element.tabDelete(filter, layid);

    • 参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
    • 参数 layid : 选项卡标题元素的 lay-id 属性值

    切换 tab

    element.tabChange(filter, layid);

    • 参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
    • 参数 layid : 选项卡标题元素的 lay-id 属性值

    自定义 tab

    element.tab(options);

    • 参数 options : 属性可选项，见下表：
    options描述类型
    headerElem指定自定义的 tab 头元素项选择器string / DOM
    bodyElem指定自定义的 tab 主题内容元素项选择器string / DOM

    该方法用于绑定自定义 tab 元素（即非 class="layui-tab 定义的结构）。示例如下：

    1. <style>
    2. .demo-tab-header .layui-btn.layui-this{border-color: #1E9FFF; color: #1E9FFF;}
    3. .demo-tab-body>div{display: none;}
    4. style>
    6. <div class="demo-tab-header layui-btn-container" id="tabHeader">
    7.   <button class="layui-btn layui-btn-primary layui-this">标签1button>
    8.   <button class="layui-btn layui-btn-primary">标签2button>
    9.   <button class="layui-btn layui-btn-primary">标签3button>
    10. div>
    11. <div class="demo-tab-body" id="tabBody">
    12.   <div class="layui-show">内容-1div>
    13.   <div>内容-2div>
    14.   <div>内容-3div>
    15. div>
    16. <script>
    17. layui.use(function(){
    18.   var element = layui.element;
    19.   // 绑定自定义的 tab 元素
    20.   element.tab({
    21.     headerElem: '#tabHeader>.layui-btn',
    22.     bodyElem: '#tabBody>div'
    23.   });
    24. });
    25. script>

    五：事件

    tab 切换事件

    element.on('tab(filter)', callback);

    • 参数 tab(filter) 是一个特定结构。
      • tab 为 tab 切换事件固定值；
      • filter 为 tab 容器属性 lay-filter 对应的值。
    • 参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数

    例如：点击 tab 选项切换时触发

    1. var element = layui.element;
    2.  
    3. // tab 切换事件
    4. element.on('tab(filter)', function(data){
    5.   console.log(this); // 当前 tab 标题所在的原始 DOM 元素
    6.   console.log(data.index); // 得到当前 tab 项的所在下标
    7.   console.log(data.elem); // 得到当前的 tab 容器
    8. });

    tab 删除事件

    element.on('tabDelete(filter)', callback);

    • 参数 tabDelete(filter) 是一个特定结构。
      • tabDelete 为 tab 删除事件固定值；
      • filter 为 tab 容器属性 lay-filter 对应的值。
    • 参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

    例如：点击 tab 选项删除时触发

    1. var element = layui.element;
    2.  
    3. // tab 删除事件
    4. element.on('tabDelete(filter)', function(data){
    5.   console.log(data.index); // 得到被删除的 tab 项的所在下标
    6.   console.log(data.elem); // 得到当前的 tab 容器
    7. });
  • 相关阅读:
    Spring之事务开发
    若依前后端分离版搭建记录
    谷歌云 | 零售行业的生成式 AI：如何跟上步伐并取得领先
    什么是yum源？如何对其进行配置？
    虹科分享 | 谷歌Vertex AI平台使用Redis搭建大语言模型
    项目经理需要的技能
    JVM系列（一）：JVM类加载过程详解
    Qt扫盲-QSqlField 理论总结
    【mitmproxy手机端App抓包】
    关于MAC电脑无法正常登陆H3C iNodes登陆的解决办法
  • 原文地址：https://blog.csdn.net/qq_61313896/article/details/132869786