一、前言
1、一直在探索一个强大、简单、优美的 UI 框架。
2、必要的情况下，做为一个后台方向的程序员，也可以上场接手前端的工作，独立完成一些小型简单的项目。
3、毕竟前后端分离，虽能发挥彼此的专长，但也带来很多麻烦（如跨域、登录拦截），有时候不如全栈完成项目来得快，真的。
4、想要完成全栈开发，EasyUI 是一个不错的选择（强大、简单），很多交互都变得十分简单了，但是致命的缺点就是界面如明日黄花，简陋不已。
5、BootStrap 也是可以接受的（简单、优美），但是功能并不是那么强大，因其专注于视觉建设
6、ElementUI，还不错（强大、优美），但是基于 Vue 的，侧重前端工程化，不是那么简单轻量
7、LayUI 在笔者看来，是一个最佳的选择（强大、简单、优美），又是国产的，支持！
- 虽一直研究后台方向的技术，但适当写一下前端的，也是一件令人愉悦的事情
- LayUI 最近新出的一些高级应用是要收费的，可以理解，也有点遗憾
LayUI 官方资料
- LayUI API官 方文档：http://www.layui.com/doc/
- LayUI 官方 demo：http://www.layui.com/demo/
二、demo
个人觉得官方 API 的 demo 不清楚、官方 demo 太杂，于是小结了一下几点关键应用，其他同理
1.alert.html 提示1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ITAEM</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="libs/jquery-1.7.2.js"></script>
<script src="layui/layui.js"></script>
</head>
<body>
<input type="button" id="btn" value="温馨提示" class="layui-btn" />
<script type="text/javascript">
//use引入所需模块
layui.use('layer', function() {
var layer = layui.layer;
$("#btn").click(function() {
//提示消息
layer.msg('你今天真好看');
})
});
</script>
</body>
</html>2.tips.html 提示2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ITAEM</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="libs/jquery-1.7.2.js"></script>
<script src="layui/layui.js"></script>
</head>
<body>
<input type="button" id="btn" value="提示" class="layui-btn" />
<script type="text/javascript">
//use引入所需模块
layui.use('layer', function() {
var layer = layui.layer;
//获取元素
var btn = document.getElementById("btn");
//按钮点击事件
btn.onclick = function() {
//提示内容、提示位置
layer.tips('竹本无心，无心则无伤', '#btn', {
//提示框颜色
tips: [1, '#cbda5a'],
//提示框显示的时长
time: 1000
});
}
});
</script>
</body>
</html>3.confirm.html 确认框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ITAEM</title&
最低0.47元/天 解锁文章
扫一扫
1564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
