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

这篇具有很好参考价值的文章主要介绍了Layui快速入门之第六节 选项卡。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一:基本概念

选项卡依赖element模块

API

元素属性

基本使用:

二:选项卡风格

默认风格

简约风格 

​编辑

卡片风格

三:hash 状态匹配

四:tab相关操作

渲染 tab

添加 tab

删除 tab

切换 tab

自定义 tab

五:事件

tab 切换事件

tab 删除事件


一:基本概念

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

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

选项卡依赖element模块

<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> 元素上

基本使用:

<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>

Layui快速入门之第六节 选项卡,Layui,layui,前端,javascript

二:选项卡风格

tab 组件提供了三种 UI 风格,分别为:

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

默认风格

<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>

Layui快速入门之第六节 选项卡,Layui,layui,前端,javascript

简约风格 

<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>

Layui快速入门之第六节 选项卡,Layui,layui,前端,javascript

卡片风格

<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>

Layui快速入门之第六节 选项卡,Layui,layui,前端,javascript

三:hash 状态匹配

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

<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>

Layui快速入门之第六节 选项卡,Layui,layui,前端,javascript

四:tab相关操作

渲染 tab

element.render('tab', filter);

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

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

<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 定义的结构)。示例如下:

<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 选项切换时触发

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 选项删除时触发文章来源地址https://www.toymoban.com/news/detail-733527.html

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

到了这里,关于Layui快速入门之第六节 选项卡的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • layui选项卡演示

    在前端开发中,选项卡常用于展示多个内容模块,提供用户友好的界面交互方式。layui作为一款简洁易用的前端框架,提供了丰富的组件库,其中包括了强大且易用的选项卡组件。 本文将介绍layui选项卡的基本用法以及常用功能,并通过实例演示具体步骤。 首先,我们需要在

    2024年02月16日
    浏览(33)
  • layui实现动态添加选项卡

    上一篇博客介绍了树形菜单的实现,这一篇将继续完善通过点击左侧树形菜单实现动态打开选项卡Tab Tab广泛应用于Web页面,因此我们也对其进行了良好的支持(简约风格、卡片风格、响应式Tab以及带删除的Tab等等)。Layui内置多种Tab风格,支持删除选项卡、并提供响应式支持

    2024年02月16日
    浏览(30)
  • layui实现选项卡(万字博客!!!)

    今日金句 努力不一定会被看到,但成功会 在上篇博客中,我们用layui实现了后台首页的重要部分——左侧树形菜单, 本篇博客将带你通过点击左侧树形菜单实现动态打开选项卡Tab Tab广泛应用于Web页面,因此我们也对其进行了良好的支持(简约风格、卡片风格、响应式Tab以及

    2024年02月15日
    浏览(28)
  • Layui之选项卡案例 详细易懂

    ⭐  本期精彩: 利用Layui框架实现动态选项卡 ⭐ 继上一篇已经实现了左边的树形菜单栏,这一关卡我们已通过,接下来就是实现右边的动态选项卡的关卡,上个关卡的效果及链接 目录 ⭐ 本期精彩: 利用Layui框架实现动态选项卡           ⭐ 链接:http://t.csdn.cn/tYccL 一

    2024年02月16日
    浏览(36)
  • 使用.LayUI实现动态选项卡Tab的强大功能

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

    2024年02月16日
    浏览(51)
  • 【Git 入门教程】第六节、Git高级操作

    Git是一种非常强大的分布式版本控制系统,可以帮助开发者轻松地管理和协调代码库。在本文中,我们将介绍一些Git高级操作,包括如何管理Git仓库、标签、子模块和忽略文件。 Git提供了许多命令来管理本地Git仓库。以下是一些常用的管理命令: 初始化一个新的Git仓库: 查

    2024年02月05日
    浏览(47)
  • 前端框架Layui的使用讲解(Layui搭建登录注册页面)

    目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面(公用页面) jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭建注册页面 静态效果图 jsp页面搭建 Servlet页面编写 最

    2024年02月15日
    浏览(41)
  • 【前端】layui前端框架学习笔记

    【前端目录贴】 参考视频 :LayUI 参考笔记 :https://blog.csdn.net/qq_61313896/category_12432291.html 官网:http://layui.apixx.net/index.html 国人16年开发的框架,拿来即用,门槛低 … Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,

    2024年04月23日
    浏览(47)
  • 前端框架LayUI

    Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适 用。 可以直接使用Bootstrap提供的 CSS 样式表,Bootstrap的源码是采用最流行的CSS预处理工具Less和Sass开发的。可以直接采用预编译的CSS文件快速开发,也可以从Bootstrap源码自定义自

    2024年02月02日
    浏览(55)
  • 【前端】Layui动态数据表格拖动排序

    目的:使用Layui的数据表格,拖动行进行排序。 使用插件:layui-soul-table 和 Layui 1.layui-soul-table文档:https://soultable.yelog.org/#/zh-CN/component/start/install 2.layui文档:Layui table模块 | 数据表格 | datatable - 在线演示 结合Layui并参看layui-soul-table官方教程,写的比较详细页比较简单。 实现

    2024年02月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包