layui的使用
官方镜像地址之一: https://www.layuiweb.com/
页面元素
layui-show 用于显示块状元素
layui-hide 用于隐藏元素
1
2
3
2
3
栅格系统
可以这样操作
<body>
<div class="layui-container">
<div class="layui-col-md4">
... 这部分内容/某个或某些页面元素 占据4个列
</div>
</div>
</body>
若需要响应式布局,需添加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
表单 - 依赖于form模块
.layui-form 定义表单效果
.layui-form-item 定义表单里的每组元素
.layui-form-label 提示文本
.layui-input-block .layui-input-inline 承载表单控件(前者表明输入框控件是块级元素,后者表明是行级元素)
表单控件(eg:input)的属性
required属性: H5表单的新属性,表单控件必填
lay-verify="required" 注册form模块需要验证的类型,lay-verify是layui提供的校验属性
class="layui-input" layui的input控件的样式 看结合的是.layui-input-block还是.layui-input-inline,展示的宽度效果不一样!
下拉选择框 还可以根据optgroup标签给select分组
组装行内表单
class="layui-inline": 定义外层行内
class="layui-input-inline": 定义内层行内
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
导航 - 依赖于element模块
.layui-nav 定义导航
.layui-nav-item layui导航的每一项
.layui-this 导航的默认选中
.layui-nav-child 二级菜单
.layui-nav-itemed 默认展开
.lay-shrink 点击一个子菜单,收缩其他子菜单
.layui-nav-child-c 子菜单居中对齐
.layui-nav-child-r 子菜单向右对齐
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
菜单 - 依赖于dropdown模块
<li lay-options="{
id: 100
,title: 'menu item 1'
,type: '' //支持的类型有：group、parent，具体用法参见上文
,aaa: '任意参数'
}">内容</li>
// -- 便于点击后,需要得到一些数据
// 需要引入内置的jquery
layui.use(['jquery','dropdown'], function(){
var dropdown = layui.dropdown;
//菜单点击事件,其中 docDemoMenu1 对应的是菜单结构上的 id 指
dropdown.on('click(docDemoMenu1)', function(options){
var othis = $(this); //当前菜单列表的 DOM 对象
console.log(options); //菜单列表的 lay-options 中的参数
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
选项卡
我们使用一般的就行.
选项卡里有一个 ID焦点定位的东西. 一般用于在左侧的垂直导航点击某个,然后在选项卡里生成. 具体实现不用纠结.
1
2
2
layer弹出层
layer.open()是底层的方法,好看的弹出层都是基于该方法进行封装实现的.
eg: layer.alert('见到你真的很高兴', {icon: 6});就是对信息框的一个封装.
基础参数:
1> 最常用的有三个 - type、title、content
<body>
<div class="mydiv" id="mydiv" style="padding: 30px;color: aquamarine;display: none;">Hello World!</div>
<script>
layui.use(['jquery', 'layer'], function() {
var $ = layui.$
var layer = layui.layer
layer.open({
type: 1,
title: "提示框",
// content: "<b>我是提示框的内容.</b>",
content: $("#mydiv"),
})
/*
// 若type是2, content可写项目里页面的地址
layer.open({
type: 2,
content: '/web/index/'
});
*/
})
</script>
</body>
2> 其他参数
skin
area 宽高
offset 弹出框显示在页面哪
icon - 信息框和加载框设置才有效,即type:0 type:3
btn - 一般第一个是确认按钮的回调,第二个是取消按钮的回调.
btnAlign 按钮排列方式
shadeClose 默认false,值为true表明点击弹出层其他地方,弹出层关闭
time 一般用于加载层
anim 弹出动画
★ maxmin 最大小化,比如里面是个表格
... ...
内置方法 - 一些封装的方法
var index1 = layer.open({
type: 2,
content: '02_表格.html',
})
// 弹出时就将此弹窗最大化了!
layer.full(index1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49