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：选项卡的头

1layui-tab-this：选中该选项卡

（2）layui-tab-content：选项卡的内容

1layui-tab-item：一个选项卡头对应的具体内容

2layui-tab-show：表示初始显示，一般哪个头上加了layui-tab-this，它对应的content就加上layui-tab-show

3、相关属性

lay-allowclose="true"：是否开启关闭按钮

lay-filter="demo"：用来在方法中唯一确定一个layui组件

lay-id="1"：用来配合lay-filter属性唯一确定一个子组件

4、相关方法

elementtabAdd(filter, options)：用于新增一个Tab选项

option示例：

{

title: '选项卡的标题'

,content: '选项卡的内容' //支持传入html

,id: '选项卡标题的lay-id属性值'

}

elementtabDelete(filter, layid)：用于删除指定的Tab选项

elementtabChange(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=""

一、 我们在使用layuitable前必须初始化layui模块，用到的模块一般常用的有两种 layer（d出层）和 table（数据表格），然后用function进行模快的初始化，当然在初始化模块之前我们必须声明几个全局变量，

声明两个变量（layer和layuiTable）来接收模块的数据,并且保存layui模块以便全局使用。

声明一个变量（tabStudent）来放置表格数据。

二、开始初始化模块

首先我们在加载事件里面将声明的那两个变量来接收layer（d出层）和 table（数据表格）

三、接下来就是初始化表格，初始化得到的数据就放入刚刚声明的全局变量（tabStudent）里面

四、在然后就是写初始化表格里面的参数：

将表格的ID放入elem(指定原始table容器的选择器或DOM，方法渲染方式必填)里面

查询方法的路径(url: 异步数据接口相关参数，url参数为必填项)

设置表头（cols） 将表格的结构放入

例：

需要写一个方法来设置最后一列来返回设置在最后一列所设置的 *** 作按钮，比如当我们要在 *** 作那行设置一个修改和删除的按钮的时候：

Onclick是点击事件

4 设置表格每页的行数：page（开启分页）：{

limit：n (指定每页显示的条数)

limits: [ 5,10,20,n] (每页条数的选择项)}

5 当你需要表格的一些“列显示隐藏” “打印” 或者 “导出” 功能的时候你就必须设置开启表格的工具栏

参数toolbar的作用便是开启表格头部工具栏区域，该参数支持4种类型值：

 toolbar: ’#toolbarDemo(注：该代码取的是自定义好的模板的ID 该模板可以放在页面的任意位置)’ 指定自定义工具栏模板选择器

 toolbar: ’xxx’ 直接传入工具栏模板字符

 toolbar: true 仅开启工具栏，不显示左侧模板

 toolbar: ‘default ’ 让工具栏左侧显示默认的内置模板

该参数的默认值为false

6 设置表格的图标：

defaultToolbar:可以自由配置头部工具右侧的图标，数组可以3种：

defaultToolbar :[‘filter’]:显示筛选图标

defaultToolbar [‘exports’]：显示导出图标

defaultToolbar [‘print’]：显示打印图标

这些值也可以根据排序的顺序来显示排版图标，如defaultToolbar:[‘filter’,’exports’,’print’

7 Table容器的默认宽度是跟随它的父元素铺满的，你也可以设定一个固定的值（width），当容器中的内容超出了该宽度时，会自动出现横向滚动条。甚至还可以设置表格的高（height）。

8 如果你点击一个切换分页时不知道它是否为加载状态，则你可以添加loading这个参数，它的作用就是是否显示加载条，默认值是为true，如果设置false则在切换分页时不会出现加载条（注：该参数只是适于url参数开启的方式）。

五、然后就是在控制器为表格添加数据，数据添加完成后将其方法名称放入url里面。

不多说先解决:

父级权限不判断下面的下拉框选上了没有，选择子级权限的话就判断

hmtl如下

验证方式如下:

checkfatherpower:function(){

            var value = $("#radioitem")find("input[type='radio']:checked")val();

            if(value==2){

            var fatherpower = $("#fatherpower")val();

                           consolelog(fatherpower);

                           if(fatherpower>0){}else{

                                      return '添加子权限必须选择父权限';

                            }

               }

}

罗罗诺·亚索

码龄3年

关注

layui监听事件

1监听select 改变

代码如下（示例）：

<!-- 不用form 用div也可以 -->

<form class="layui-form">

<div class="layui-form-item">

<label class="layui-form-label">下拉选择框</label>

<div class="layui-input-block">

<select name="interest" lay-filter="aihao">

<option value="0">写作</option>

<option value="1">阅读</option>

<option value="2">听歌</option>

<option value="4">游戏</option>

</select>

</div>

</div>

</form>

<script type="text/javascript" src="/layui/layuijs"></script>

<script type="text/javascript">

layuiuse('form', function(){

var form = layuiform;

formon('select(aihao)',function(data){

consolelog(data);

consolelog(dataelem); //得到select原始DOM对象

consolelog(datavalue); //得到被选中的值

consolelog(dataothis); //得到美化后的DOM对象

});

});

</script>

2监听checkbox 复选框

代码如下（示例）：

formon('checkbox(filter)', function(data){

consolelog(dataelem); //得到checkbox原始DOM对象

consolelog(dataelemchecked); //是否被选中，true或者false

consolelog(datavalue); //复选框value值，也可以通过dataelemvalue得到

consolelog(dataothis); //得到美化后的DOM对象

});

3监听switch 开关

代码如下（示例）：

formon('switch(filter)', function(data){

consolelog(dataelem); //得到checkbox原始DOM对象

consolelog(dataelemchecked); //开关是否开启，true或者false

consolelog(datavalue); //开关value值，也可以通过dataelemvalue得到

consolelog(dataothis); //得到美化后的DOM对象

});

4监听radio 单选框

代码如下（示例）：

formon('radio(filter)', function(data){

consolelog(dataelem); //得到radio原始DOM对象

consolelog(datavalue); //被点击的radio的value值

});

5监听submit 提交

代码如下（示例）：

<button lay-submit lay-filter="">提交</button>

formon('submit()', function(data){

consolelog(dataelem) //被执行事件的元素DOM对象，一般为button对象

consolelog(dataform) //被执行提交的form对象，一般在存在form标签时才会返回

consolelog(datafield) //当前容器的全部表单字段，名值对形式：{name: value}

return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

});

注意

on 的第一个参数括号内的值需要再对应元素中使用lay-filter去定义哦！！

1、新建一个html文件，命名为testhtml。

2、在testhtml中，使用script标签加载jqueryminjs文件，这是使用jquery方法的前提。

3、在testhtml页面中，创建一个button按钮，用于实现点击通过ajax请求获得json数据，在button下面再创建一个p元素，用于json数据的显示。

4、新建一个文件名为ajax_json的js文件，在文件里面创建一个json数据，如下图。

5、在testhtml页面，给button绑定click点击事件，当按钮被点击时，使用getJSON方法获得ajax_jsonjs里面的json数据，同时通过function方法进行数据的输出。

6、在function方法里面，使用each（）方法遍历json数据的内容，并使用append()方法把json里面的内容添加到p元素内。

1layui布局表格

<div class="demoTable">

搜索ID：

    <div class="layui-inline">

<input name="id" class="layui-input" id="demoReload" autocomplete="off">

</div>

<button class="layui-btn layui-bg-green" data-type="reload">搜索</button>

</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

<script>

layuiuse('table',function(){

var table =layuitable;

//方法级渲染

        tablerender({

elem:'#LAY_table_user'

            ,url:'>

以上就是关于Layui（三）：导航菜单、选项卡、进度条和面板全部的内容，包括:Layui（三）：导航菜单、选项卡、进度条和面板、layui打开页面先加载、layui根据条件判断验证(单选按钮)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！