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

一：基本概念

选项卡依赖element模块

API

元素属性

[三：hash 状态匹配](#三：hash 状态匹配)

四：tab相关操作

[渲染 tab](#渲染 tab)

[添加 tab](#添加 tab)

[删除 tab](#删除 tab)

[切换 tab](#切换 tab)

[自定义 tab](#自定义 tab)

五：事件

[tab 切换事件](#tab 切换事件)

[tab 删除事件](#tab 删除事件)

一：基本概念

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

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

选项卡依赖element模块

html 复制代码

<script type="text/javascript">
    //选项卡依赖element模块
    layui.use('element',function(){
        var element = layui.element;
    });
</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 容器 `<ul class="layui-tab">` 上。
lay-id	tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 `<li>` 元素上

基本使用：

html 复制代码

<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">标签1</li>
    <li lay-id="22">标签2</li>
    <li lay-id="33">标签3</li>
    <li lay-id="44">标签4</li>
    <li lay-id="55">标签5</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 class="layui-btn-container">
  <button class="layui-btn" lay-on="tabAdd">新增 tab 项</button>
  <button class="layui-btn" lay-on="tabDelete">删除「标签4」</button>
  <button class="layui-btn" lay-on="tabChange">切换到「标签3」</button>
</div>
<script>
layui.use(function(){
  var element = layui.element;
  var util = layui.util;
  // 普通事件
  util.on('lay-on', {
    tabAdd: function(){
      // 新增一个 tab 项
      var label = (Math.random()*1000|0); // 标记 - 用于演示
      element.tabAdd('test-handle', {
        title: '新选项'+ label,
        content: '内容-'+ label,
        id: new Date().getTime() // 实际使用一般是规定好的id，这里以时间戳模拟下
      })
    },
    tabDelete: function(othis){
      // 删除指定 tab 项
      element.tabDelete('test-handle', '44'); // 删除："商品管理"
      othis.addClass('layui-btn-disabled');
    },
    tabChange: function(){
      // 切换到指定 tab 项
      element.tabChange('test-handle', '33'); // 切换到：标签3
    }
  });
});
</script>

二：选项卡风格

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

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

默认风格

html 复制代码

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</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>

简约风格

html 复制代码

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</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>

卡片风格

html 复制代码

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</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>

三：hash 状态匹配

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

html 复制代码

<div class="layui-tab" lay-filter="test-hash">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">标签1</li>
    <li lay-id="22">标签2</li>
    <li lay-id="33">标签3</li>
    <li lay-id="44">标签4</li>
    <li lay-id="55">标签5</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>
<script>
layui.use(function(){
  var element = layui.element;
  
  // hash 地址定位
  var hashName = 'tabid'; // hash 名称
  var layid = location.hash.replace(new RegExp('^#'+ hashName + '='), ''); // 获取 lay-id 值
    
  // 初始切换
  element.tabChange('test-hash', layid);
  // 切换事件
  element.on('tab(test-hash)', function(obj){
    location.hash = hashName +'='+ this.getAttribute('lay-id');
  });
});
</script>

四：tab相关操作

渲染 tab

element.render('tab', filter);

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

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

html 复制代码

<div id="test"></div>
<script>
layui.use(function(){
  var element = layui.element;
  var $ = layui.$;
  // 动态插入 tab 元素
  $('#test').html(`
    <div class="layui-tab" lay-filter="demo-filter-tab">
      <!-- ... -->
    </div>
  `);
  // 渲染 tab 组件
  element.render('tab', 'demo-filter-tab');
});
</script>

添加 tab

element.tabAdd(filter, options);

参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
参数 options : 添加 tab 时的属性可选项，见下表：

options	描述	类型
title	选项卡的标题	string
content	选项卡的内容，支持传入 `html`	string
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 定义的结构）。示例如下：

html 复制代码

<style>
.demo-tab-header .layui-btn.layui-this{border-color: #1E9FFF; color: #1E9FFF;}
.demo-tab-body>div{display: none;}
</style>
<!-- 任意自定义的 tab 元素 -->
<div class="demo-tab-header layui-btn-container" id="tabHeader">
  <button class="layui-btn layui-btn-primary layui-this">标签1</button>
  <button class="layui-btn layui-btn-primary">标签2</button>
  <button class="layui-btn layui-btn-primary">标签3</button>
</div>
<div class="demo-tab-body" id="tabBody">
  <div class="layui-show">内容-1</div>
  <div>内容-2</div>
  <div>内容-3</div>
</div>
<script>
layui.use(function(){
  var element = layui.element;
  // 绑定自定义的 tab 元素
  element.tab({
    headerElem: '#tabHeader>.layui-btn',
    bodyElem: '#tabBody>div'
  });
});
</script>

五：事件

tab 切换事件

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

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

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

javascript 复制代码

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

tab 删除事件

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

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

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

javascript 复制代码

var element = layui.element;
 
// tab 删除事件
element.on('tabDelete(filter)', function(data){
  console.log(data.index); // 得到被删除的 tab 项的所在下标
  console.log(data.elem); // 得到当前的 tab 容器
});

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

一：基本概念

选项卡依赖element模块

API

元素属性

基本使用：

二：选项卡风格

默认风格

简约风格

卡片风格

三：hash 状态匹配

四：tab相关操作

渲染 tab

添加 tab

删除 tab

切换 tab

自定义 tab

五：事件

tab 切换事件

tab 删除事件

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