layui选项卡Tabs

阅读须知:当前文档仅针对layui系列更新:2019-01-20 08:53:52 阅读量:5454 评论跟帖:0 文档整理编辑:Larry

文档导读摘要:Tab(Module-Tabs)也称选项卡、页签。是指将多个分类内容放置在同一个布局块内,但每次只有一个分类的内容是可见的,当使用鼠标切换不同分类时,展示不同的内容。tab实现了在一定的空间中展示更多信息的功能,在一个区域内分门别类的展示信息,用户依据自身需求查看不同内容,因此Tab选项卡广泛应用于Web页面,可用于导航菜单头部和侧边,在layui中Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。【需要注意的是layui中的tab选项卡依赖于layui.element组件】

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流

如下所示:这是layui中Tab选项卡的一个最基本的例子:

如果需要对Tab进行外部新增、删除、切换等操作,请移步到“内置组件-常用元素操作”页面中查阅:基础方法
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
这里是内容1,默认显示
内容2
内容3
内容4
内容5
<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</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>
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
      
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <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>
</div>      
      

通过追加class:layui-tab-brief 来设定简洁风格。
值得注意的是,如果存在 layui-tab-item 的内容区域,在切换时自动定位到对应内容。如果不存在内容区域,则不会定位到对应内容。你通常需要设置过滤器,通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
1
2
3
4
5
6
<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <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 class="layui-tab-item">6</div>
  </div>
</div>
      

通过追加class:layui-tab-card来设定卡片风格

当容器的宽度不足以显示全部的选项时,即会自动出现展开图标,如下以卡片风格为例(注意:所有Tab风格都支持响应式):

  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
1
2
3
4
5
6

额,感觉像是打了个小酱油。而事实上在自适应的页面中(不固宽),它的意义才会呈现。

你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

  • 网站设置
  • 用户基本管理
  • 权限分配
  • 全部历史商品管理文字长一点试试
  • 订单管理
1
2
3
4
5
6
<div class="layui-tab" lay-allowClose="true">
  <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</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 class="layui-tab-item">6</div>
  </div>
</div>
      

与默认相比没有什么特别的结构,就是多了个属性 lay-allowClose="true"

你可以通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引,以用于外部的定位切换,如后台的左侧导航、以及页面地址 hash的匹配。

<div class="layui-tab" lay-filter="test1">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="111" >文章列表</li>
    <li lay-id="222">发送信息</li>
    <li lay-id="333">权限分配</li>
    <li lay-id="444">审核</li>
    <li lay-id="555">订单管理</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>
      

属性 lay-id 是扮演这项功能的主要角色,它是动态操作的重要凭据,如:

<script>
layui.use('element', function(){
  var element = layui.element;
  
  //获取hash来切换选项卡,假设当前地址的hash为lay-id对应的值
  var layid = location.hash.replace(/^#test1=/, '');
  element.tabChange('test1', layid); //假设当前地址为:http://a.com#test1=222,那么选项卡会自动切换到“发送消息”这一项
  
  //监听Tab切换,以改变地址hash值
  element.on('tab(test1)', function(){
    location.hash = 'test1='+ this.getAttribute('lay-id');
  });
});
</script>      
      

同样的还有增加选项卡和删除选项卡,都需要用到 lay-id,更多动态操作请阅读:layui.element模块