layui组件相关学习

Layui相关组件学习

狂神是一个很好的学习平台

1.选项卡

说明：在标签中使用class=layui-tab可定义该标签为一个选项卡，lay-allowClose="true"表示该选项卡可以被删除，使用layui-tab-item可以设置点击该选项卡时的内容显示。

<div class="layui-tab" lay-allowClose="true"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户基本管理</li><li>权限分配</li><li>全部历史商品管理文字长一点试试</li><li>订单管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">1</div><div class="layui-tab-item">2</div><div class="layui-tab-item">3</div><div class="layui-tab-item">4</div><div class="layui-tab-item">5</div><div class="layui-tab-item">6</div></div>
</div>

2.导航条

2.1水平导航

说明：导航依赖 element 模块，需要引入layui.use否则无法进行功能性操作ul标签中使用class="layui-nav"来定义该标签为一个水平导航条，使用li标签（使用class=“layui-nav-item”）来定义导航条里面的子菜单，在li标签里面再嵌套一层dl（使用class=“layui-nav-child”）标签和dd标签表示为该菜单的二级菜单，并且使用layui-this表示指向当前页面

<ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="">最新活动</a></li><li class="layui-nav-item layui-this"><a href="">产品</a></li><li class="layui-nav-item"><a href="">大数据</a></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"> <!-- 二级菜单 --><dd><a href="">移动模块</a></dd><dd><a href="">后台模版</a></dd><dd><a href="">电商平台</a></dd></dl></li><li class="layui-nav-item"><a href="">社区</a></li>
</ul><script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){var element = layui.element;//…
});
</script>

2.2垂直导航

说明：导航依赖 element 模块，否则无法进行功能性操作ul标签中使用class="layui-nav“，layui-nav-tree来定义该标签为一个垂直导航条，使用li标签标签来定义导航条里面的子菜单，在li标签里面再嵌套一层dl和dd标签表示为该菜单的二级菜单，并且使用layui-this表示指向当前页面，使用layui-nav-side表示为侧边栏

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">默认展开</a><dl class="layui-nav-child"><dd><a href="javascript:;">选项1</a></dd><dd><a href="javascript:;">选项2</a></dd><dd><a href="">跳转</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="">移动模块</a></dd><dd><a href="">后台模版</a></dd><dd><a href="">电商平台</a></dd></dl></li><li class="layui-nav-item"><a href="">产品</a></li><li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

2.3导航主题

说明：使用layui-bg-green来设置主题相关颜色

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

2.4面包屑

说明：使用*lay-separator="-"*来自定义分隔符

<span class="layui-breadcrumb" lay-separator="-"><a href="">首页</a><a href="">国际新闻</a><a href="">亚太地区</a><a><cite>正文</cite></a>
</span>

3.布局

3.1栅格布局规则（响应式规则）

采用layui-row来定义行，使用layui-col-md*来定义列，md表示不同的屏幕标识【xs(超小屏幕，一般为手机)，sm(小屏幕，一般为ipad)，md(中等屏幕，一般为电脑屏幕)，lg(大屏幕)】，一般将屏幕分为12份，根据屏幕大小进行页面大小显示。

3.2布局容器

固定宽度：使用*class=“layui-container”*来进行布局，可在屏幕上显示固定的大小

完整宽度：使用class="layui-fluid"进行布局，可以在屏幕上完整显示

3.3列间距（间距低于30px）

使用layui-col-space*来定义列间距的大小（*可以表示1~30之间的所有偶数,1，5，10，15，20，25，30）

3.4列偏移（间距高于30px）

使用*layui-col-md-offset**使列向右偏移

<div class="layui-row"><div class="layui-col-md4">4/12</div><div class="layui-col-md4 layui-col-md-offset4">偏移4列，从而在最右</div>
</div>

3.5栅格嵌套

列与列之间可以无限嵌套

<div class="layui-row layui-col-space5"><div class="layui-col-md5"><div class="layui-row grid-demo"><div class="layui-col-md3">内部列</div><div class="layui-col-md9">内部列</div><div class="layui-col-md12">内部列</div></div></div><div class="layui-col-md7"><div class="layui-row grid-demo grid-demo-bg1"><div class="layui-col-md12">内部列</div><div class="layui-col-md9">内部列</div><div class="layui-col-md3">内部列</div></div></div>
</div>

4.按钮

4.1定义按钮

layui-btn来定义一个按钮，

4.2设置按钮颜色

layui-btn-primary可以用来设置按钮的颜色

4.3设置按钮边框颜色

layui-border-green可以设置按钮的边框颜色

4.4设置按钮大小

layui-btn-**来设置按钮的大小（**可以为xs，sm，md，lg）

4.5圆角按钮

使用layui-radius可以将按钮设置为圆角按钮

4.6图标

layui-icon可以为按钮设置一些icon图标

<div class="layui-btn-group"><button type="button" class="layui-btn">增加</button><button type="button" class="layui-btn">编辑</button><button type="button" class="layui-btn">删除</button>
</div><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
</div><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
</div>

5.表单

5.1输入框

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class=“layui-input”：layui.css提供的通用CSS类

5.2下拉选择框

<select name="city" lay-verify=""><option value="">请选择一个城市</option><option value="010">北京</option><option value="021">上海</option><option value="0571">杭州</option>
</select>

5.3复选框

默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled> 原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

5.4开关

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

5.5单选框

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

5.6Form表单的构建（重点）

form表单效果图

代码如下：

<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码框</label><div class="layui-input-inline"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">辅助文字</div></div><div class="layui-form-item"><label class="layui-form-label">选择框</label><div class="layui-input-block"><select name="city" lay-verify="required"><option value=""></option><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">复选框</label><div class="layui-input-block"><input type="checkbox" name="like[write]" title="写作"><input type="checkbox" name="like[read]" title="阅读" checked><input type="checkbox" name="like[dai]" title="发呆"></div></div><div class="layui-form-item"><label class="layui-form-label">开关</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">单选框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>
</form><script>
//Demo
layui.use('form', function(){var form = layui.form;//监听提交form.on('submit(formDemo)', function(data){layer.msg(JSON.stringify(data.field));return false;});
});
</script>

6.表格

<table class="layui-table"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr><th>昵称</th><th>加入时间</th><th>签名</th></tr> </thead><tbody><tr><td>贤心</td><td>2016-11-29</td><td>人生就像是一场修行</td></tr><tr><td>许闲心</td><td>2016-11-28</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr></tbody>
</table>

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起使用
lay-skin=“属性值”	line （行边框风格）row （列边框风格）nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size=“属性值”	sm （小尺寸）lg （大尺寸）	若使用默认尺寸不设置该属性即可

7.弹层组件

弹层组件文档

layer.open({title: '你好',content: 'hello'
});

layui.use('layer', function(){var layer = layui.layer;layer.msg('hello');
});

8.日期和时间选择

使用layui.laydate组件(默认情况下是date类型的时间，可选择：年、月、日)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layDate快速使用</title><link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body><div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 --><input type="text" class="layui-input" id="test1">
</div><script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){var laydate = layui.laydate;//执行一个laydate实例laydate.render({elem: '#test1' //指定元素});
});
</script>
</body>
</html>

可以为组件设置一些type类型，可以呈现出不一样的效果

type可选值	名称	用途
year	年选择器	只提供年列表选择
month	年月选择器	只提供年、月选择
date	日期选择器	可选择：年、月、日。type默认值，一般可不填
time	时间选择器	只提供时、分、秒选择
datetime	日期时间选择器	可选择：年、月、日、时、分、秒

//年选择器
laydate.render({ elem: '#test',type: 'year'
});//年月选择器
laydate.render({ elem: '#test',type: 'month'
});//日期选择器
laydate.render({ elem: '#test'//,type: 'date' //默认，可不填
});//时间选择器
laydate.render({ elem: '#test',type: 'time'
});//日期时间选择器
laydate.render({ elem: '#test',type: 'datetime'
});

8.文件上传

使用layui.upload

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>upload模块快速使用</title><link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body><button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传图片
</button><script src="/static/build/layui.js"></script>
<script>
layui.use('upload', function(){var upload = layui.upload;//执行实例var uploadInst = upload.render({elem: '#test1' //绑定元素,url: '/upload/' //上传接口,done: function(res){//上传完毕回调},error: function(){//请求异常回调}});
});
</script>
</body>
</html>

9.数据表格

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>table模块快速使用</title><link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body><table id="demo" lay-filter="test"></table><script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){var table = layui.table;//第一个实例table.render({elem: '#demo',height: 312,url: '/demo/table/user/' //数据接口,page: true //开启分页,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]]});});
</script>
</body>
</html>