Tab选项卡 - 页面元素

Tab选项卡 - 页面元素

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年07月05 日

 导航菜单可以应用于头部和页面侧边，简约又美观。所以今天来对相关的内容--Tab选项卡做一个学习的小总结。Tab选项卡是一种支持响应式、支持对Tab外部进行新增、删除、切换等功能的页面元素。结构简单，支持自定义分隔符。一般默认Tab选项卡，Tab广泛应用于Web页面。在layui内置有多种Tab风格，并且拥有支持删除选项卡和支持响应式的功能。

   Layui页面元素--Tab选项卡用起来也非常的简单，不过它依赖于一个名为element的加载组件。也就是说你要快速方便的实现元素功能你就要先加载element模块。事先加载好了element模块，它就会自动找到所需要开启的功能的元素，并自动赋予该元素应有的功能。

Element模块支持的容器外层预设元素有：

Lay-filler：可选值为任意字符，事件的过滤器（公用属性），主要用于事件的精确匹配，跟选择器是比较的。

Lay-allowClose：可选值为true，针对于tab容器，是否允许选项卡关闭。默认不允许，不用设置该属性

Lay-sparator：可选值为任意分隔符，针对于面包屑容器。

然而Element模块支持的元素属性决定了Tab选项卡也有多种风格，其中的页面元素Tab选项卡的使用代码截图如下：

如图Nav为Tab选项卡头部的按钮区，中间为它们的内容区，每个Tab选项卡都是一个独立装载不同内容的容器。每个选项卡容器的id要与它们的头部id相对应。还可以根据需要给它们设置样式，在这里给它们设置了一定的高度，边框样式以及背景颜色。

Tab选项卡的多种风格类别以及使用的关键元素属性如下：

1、Tab简洁风格，通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。

2、Tab卡片风格

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

3、Tab响应式

当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，并且所有Tab风格都支持响应式

4、带删除的Tab（即可以点击Tab头部对Tab选项卡进行删除）

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

ID焦点定位

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

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

同样的还有增加选项卡和删除选项卡，都需要用到 lay-id

  上面有说Tab选项卡元素功能实现的前提是要加载Element模块，而element模块的加载不仅能自动赋予对应的页面元素功能，而且可以跟表单元素一样对页面元素进行更新渲染，方法：element.render(type, filter);                        还可以对事件进行监听，语法：element.on('event(过滤器值)', callback);  如：监听Tab选项卡的切换、删除，监听导航菜单的单击事件、监听折叠面板、动态操作进度条。这些就简单的提一下，就不做详细的总结了，需要了解的可以去查阅相关的资料layuiDoc离线手册。

最后是代码实现的效果图，见截图如下：

 如图，element模块监听导航菜单的单价事件，当点击导航菜单时，选项卡可以进行切换，就如切换到不同的页面。页面元素—Tab选项卡的使用既简单有方便与一个大页面多个内容切换显示。