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选项卡的使用既简单有方便与一个大页面多个内容切换显示。