Tab选项卡的使用

Tab选项卡属于导航菜单里面的一种。而导航菜单可以应用于头部或者侧边，而Tab选项卡提供的风干肉多样，还支持响应式，支持删除选项卡等功能。
在一个项目中，也可以应用到这个Tab选项卡，方便也快捷。

好比如上面那个海运系统管理这个项目一样，也是用到了这种带了删除的选项卡实现的功能。
而这个也是用layui插件实现的，这个模块的加载组件则是：element，而这也是使用这个功能必须加载element的模块相关功能才可以正常使用的。使用人家的东西，就得按照要求加载才可以。
图片上面的是这个模块的带删除的Tab，而除了这个还有简约风格、卡片风格、响应式、ID焦点定位、还有一个是相关的动态操作，不过这种的话就是一些对比的参数啊，监听方法，属性设置等的一些什么的了。
而在项目的过程中，使用了一种比较简单的一种风格，简约风格，所以就是成这样子的了：

点击上面那个托架资料是可以切换过来的。选项切换之后，下面的表格也是可以跟着切换的。
最主要的代码就是：

 <div class="layui-tab layui-tab-card" lay-filter="TabCheLianGuanLi"> </div>

Div里面的layui-tab这个类了，就是使用layuiTab选项卡之后要填写的，而lay-filter里面的就对应了下面那个Tab的监听切换事件了：

//监听Tabs切换事件（重载表格尺寸）
      layuiElement.on('tab(TabCheLianGuanLi)', function (data) {
      tabVehicle.resize('tabVehicle');//重载车辆信息表表格尺寸
      tabBracket.resize('tabBracket');//重载托架信息表表格尺寸
});

那个layui的加载模块在这里就不多讲了。
在上面那个div里面还要存放切换的车辆信息跟托架信息的两张表才可以：

@* 车辆管理表格 *@
 <div class="row">
     <div class="col">
          <table id="tabVehicle" lay-filter="tabVehicle"></table>
     </div>
 </div>

这是其中的一张表，还有一张也是一样的写法，只不过ID要不一样，因为ID是唯一的。如果想要在表上面加一些按钮的话也是可以的，只要清楚逻辑关系就可以了。
还有一个是Tab响应式：


上面那张图片，点击那个向下的按钮，就会出现隐藏好的那个订单管理的一个页面的Tab了。、
还有，还介绍一种就是Tab卡片风格：
这个可以在父层容器里设置属性lay-allowClose=”true”来允许Tab选项卡被删除。
这个对HTML的结构是这个样子的：

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

然后这个显示出来的效果就是：

前面还说过很多种方法，只不过介绍其中的一两个方法，也是比较常用的方法。
上面的是，点击那个页面Tab就会对应显示哪些内容，就如图片上面的那个，点击第三个页面内页面的Tab之后，下面就对应出现一个3的内容字样。
其实还有一些相关动态操作的，但是内容有点多，所以就没加上来了。而且与Tab的内容关联好像不大，都是另一些内容，没有再介绍这个Tab的了。