Layui（三）：导航菜单、选项卡、进度条和面板
（ 用什么标签不重要，只要样式用对了，都能出效果，用ul里面嵌套li与div嵌套div是一样的，注意里面子项里面要加一个a/a不然点击没效果 ）
（ 如果不加载element模块，也没有效果 ）
（在页面中有很多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为element组件）
相关样式：
1、方向
（1）水平：默认的
（2）垂直：layui-nav-tree
2、其他样式
（1） layui-nav ：代表这是一个导航菜单
（2） layui-nav-item ：放在（1）的子标签中，代表这个导航菜单的一个子项
（3） lay-this ：和（2）同级，代表当前选中的菜单项
（4） layui-nav-child ：子项的子项
（5） layui-nav-img ：会以导航合适的大小处理图片
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
1、风格说明
默认风格：只需要加layui-tab
简洁风格：再追加上layui-tab-brief
卡片风格：再追加上layui-tab-card
2、相关样式
layui-tab：代表这是一个选项卡
（1）layui-tab-title：选项卡的头
【1】layui-tab-this：选中该选项卡
（2）layui-tab-content：选项卡的内容
【1】layui-tab-item：一个选项卡头对应的具体内容
【2】layui-tab-show：表示初始显示，一般哪个头上加了layui-tab-this，它对应的content就加上layui-tab-show
3、相关属性
lay-allowclose="true"：是否开启关闭按钮
lay-filter="demo"：用来在方法中唯一确定一个layui组件
lay-id="1"：用来配合lay-filter属性唯一确定一个子组件
4、相关方法
element.tabAdd(filter, options)：用于新增一个Tab选项
option示例：
{
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
,id: '选项卡标题的lay-id属性值'
}
element.tabDelete(filter, layid)：用于删除指定的Tab选项
element.tabChange(filter, layid)：用于外部切换到指定的Tab项上
进度条进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。
相关样式：
layui-progress：表示这是一个进度条
layui-progress-bar：表示进度条中的进度，依靠其lay-percent属性的值来控制进度大小，值取值范围0-100%
layui-bg-red/green/...：表示进度条的颜色
layui-progress-big：表示大尺寸进度条
相关属性：
lay-percent="80%"：代表具体的进度
lay-showpercent="true"：是否显示百分比数字
进度条的宽度是 100% 适配于它的父级元素
一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等（同样依赖element）
1、卡片面板
相关样式：
layui-row：代表一行
layui-col-space15：space0-space30，代表卡片之间的间距
layui-colmd5：md1-12，代表当前卡片占整行的列数
layui-card：代表一个卡片
layui-card-header：代表卡片头信息
layui-card-body：代表卡片内容样式
2、普通折叠面板
相关样式：
layui-collapse：代表一个折叠面板
layui-colla-item：代表一个折叠项
layui-colla-title：代表一个折叠项的标题
layui-colla-content：代表一个折叠项展开s的内容
layui-show：是否展开
相关事件：
3、手风琴面板
在普通折叠面板的基础上加上lay-accordion=""
layui的select中option选中后怎么新标签跳转?
使用他自带的监听
layui.use("from",function(){
let from = layui.from;
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
//这里可以写你选中后要执行的函数
});
})
Layui-跳转传参、父子页面
重点是这个parent，折磨了我一下午，原来是没有搞清应该从父页面打开。最开始的xadmin.add_tab()是用在左边菜单上的，点击就会增加新的标签页，这个才是父页面。
使用X-admin(Layui)前端框架，在打开新Tab页面内刷新其他Tab页面解决方案（表单数据多可以使用open弹框全屏）
这个bug隐藏地非常深，我一开始写了新增合同页面，通过“下一步”的按钮跳转到添加合同条款的页面，结果可以跳转，合同编号也传递正确了，但是条款信息提交时却又返回到了上一页面。
因为某种机缘巧合而发现了原来是新增合同页面的form检查语句form.verify{}不让我提交……至于原因，可能是我把不该写的东西写在了form.verify{}里吧……改得太快，没注意具体原因。
layui 打开新页面,并传入参数
下面这篇也是差不多的道理，拼接url实现layer.open
layui+springboot+thymeleaf 动态传参
我的理解是如果不return false，传的参数会被页面自动刷新掉。
Layui form表单提交注意事项
如何在表单里面做上一步跟下一步
提交form表单后，页面的跳转和刷新问题
layui弹出黑框,页面卡住无法点击,这是什么原因
使用的是layer.alert方法吗，你先检查下jquery版本，正常引用一般不会出现问题。
有问题有可能是jquery的版本低了，与layer插件冲突。