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

列表生成 checkbox

                        {volist name='examtype' id='vo' key="k" }

                                          <input type="checkbox" lay-filter="elevel" id="elevel" name="elevel" value="{$void}"  title="{$voexamstyle}">

                          {/volist}

获取列表值

              var value = [];

                  $('input[name=elevel]:checked')each(function(){

                           //这里用所选复选框或运算后的值

                      valuepush($(this)val());

                  });

value是数组；

//转换为字符串

             value=valuetoString();     得到如：1,2,3,4等等

Viewpopup = function (e,data) {

   eunbind('click');

    eclick(function () {

         layeropen({

                  type: 1,

                 scrollbar:false,

                 area: [datawidth + 'px', dataheight + 'px'],

                content: $('#' + dataid),

                end:function(){

                        $('#' + dataid)hide();

                      }

             });

         });

};

注意：这里的data-id和d窗效果的id保持一致，所以实现以上的效果

首先不管是单选框还是复选框或者是下拉框，都要在你写的标签外面套一层div或者是form标签，如：

<div class="layui-input-block"> <input type="radio" name="sex" value="0" title="男"> </div>，class属性是固定写法。

这样写好了以后，你如果是写在静态页面，这样式可以看见效果，如果写在js里，这样写了还有一步得写，那就是

var form = layuiform(); formrender("select"); //更新全部

这样写是外面套的是form标签，如果是div，就写layuidiv();即可。

对于下拉框的事件的使用，语法formon('event(过滤器值)', callback);

也可写成

var form=layuiform();

formon('select(addywlb)', function(data){}),这里面的选中的值可以直接datavalue;关于data里的数据结构，感兴趣可以consolelog(data);打印出看看。获取选中的其他的属性值，和普通的用法一样，$("#cxYearBegin option:selected")attr("year");对了，关于select()括号里的值是这样来的 <select name="modules" lay-verify="required" lay-filter="cxYearBegin" lay-search="" id="cxYearBegin" >，根据这个lay-filter属性来获取。

如果是复选框的事件，就可以这样写

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

如果是单选按钮是这样写：

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

如果是开关按钮，事件是一样的：

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

其中括号里的值都是通过lay-filter这个属性值来获取。

可以通过排除法来调试下，从问题来看是下拉框的问题，是不是这样用的？

<select name="tpl">

<option value="0">不选择</option>

<option value="1">模板1</option>

</select>

还有不排除加载其他JS所不兼容，比如webuploader上传文件插件，umeditor编辑器插件。

以上就是关于Layui（三）：导航菜单、选项卡、进度条和面板全部的内容，包括:Layui（三）：导航菜单、选项卡、进度条和面板、layui如何获取checkbox复选框的值、layui的d出层效果在导航中的使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！