0
点赞
收藏
分享

微信扫一扫

Hadoop生态圈中的数据同步工具SQOOP

敬亭阁主 2023-09-17 阅读 47

目录

一:基本概念

选项卡依赖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-idtab 选项唯一 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>

二:选项卡风格

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>

简约风格 

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

卡片风格

<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 仍保持对应的切换状态

<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 元素的初始化渲染

<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选项卡的内容,支持传入 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 定义的结构)。示例如下:

<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 选项删除时触发

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

相关推荐

0 条评论