>
( 用什么标签不重要,只要样式用对了,都能出效果,用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=""
<font color="red">模块加载名称: laypage </font>
laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。
通过核心方法: laypagerender(options) 来设置基础参数。
当分页被切换时触发,函数返回两个参数: obj (当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)
<font color="red">模块加载名称: table </font>
创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table> ,然后通过 tablerender() 方法指定该容器。
数据接口 userjson
在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。
1) 带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在 <th> 标签中设置属性 lay-data="" 用于配置表头信息
页面已经存在了一段有内容的表格,由原始的table标签组成,只需要赋予它一些动态元素。
执行用于转换表格的JS方法
当然不仅仅包含这些,还有其他的一些比如tab的切换、折叠面板的展开与合并、二级导航的的展开与合并等等。
默认效果当然不用多说,只要我们能实现element元素的加载,也就是一步搞定的事情,重点还是看看element中一些常用的方法和简单的使用
以上就是关于layui中复选框全选全部的内容,包括:layui中复选框全选、Layui框架:layui的常用组件[表单]、Layui(三):导航菜单、选项卡、进度条和面板等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)