使用新、热、轻量、简单、强大、优美的 LayUI框架构建前端页面

一、前言

1、一直在探索一个强大、简单、优美的 UI 框架。
2、必要的情况下，做为一个后台方向的程序员，也可以上场接手前端的工作，独立完成一些小型简单的项目。
3、毕竟前后端分离，虽能发挥彼此的专长，但也带来很多麻烦（如跨域、登录拦截），有时候不如全栈完成项目来得快，真的。
4、想要完成全栈开发，EasyUI 是一个不错的选择（强大、简单），很多交互都变得十分简单了，但是致命的缺点就是界面如明日黄花，简陋不已。
5、BootStrap 也是可以接受的（简单、优美），但是功能并不是那么强大，因其专注于视觉建设
6、ElementUI，还不错（强大、优美），但是基于 Vue 的，侧重前端工程化，不是那么简单轻量
7、LayUI 在笔者看来，是一个最佳的选择（强大、简单、优美），又是国产的，支持！

* 虽一直研究后台方向的技术，但适当写一下前端的，也是一件令人愉悦的事情
* LayUI 最近新出的一些高级应用是要收费的，可以理解，也有点遗憾
LayUI 官方资料

* LayUI API官方文档：http://www.layui.com/doc/ <http://www.layui.com/doc/>
* LayUI 官方 demo：http://www.layui.com/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> <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.confirm('你参加过2017凯通杯Java程序设计决赛吗', { //按钮1、按钮1 btn: [
'参加过', '没参加'], //确认框图标 icon: 3 //按钮事件1 }, function() { //按钮事件1信息 layer.msg(
'恭喜你，你的人生经历又丰富了', { //事件1图标 icon: 1 }); //按钮事件2 }, function() { //按钮事件2信息
layer.msg('可惜了，下次记得参加', { //事件2图标 icon: 6 }); }); } }); </script> </body> </html
>
这里有必要列举一下 1-6 的 icon

4.date.html 日期

<!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="text" class="layui-input" id="date"> <script> //use引入所需模块
layui.use('laydate', function() { //从layui中获取laydate组件 var laydate =
layui.laydate;//执行一个laydate实例 laydate.render({ //指定元素 elem: '#date' , type:
'date', //默认，可不填 //带节日 calendar: true }); }); </script> </body> </html>
5.form.html 表单

<!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> <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="your name"
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="text" name="major" required lay-verify=
"required" placeholder="your major" autocomplete="off" class="layui-input"> </
div> </div> <div class="layui-form-item"> <label class="layui-form-label">方向</
label> <div class="layui-input-block"> <select name="direction" lay-verify=
"required" > <option value=""></option> <option value="0">前端</option> <option
value="1">后台</option> <option value="2">安卓</option> <option value="3">IOS</
option> <option value="4">UI</option> </select> </div> </div> <div class=
"layui-form-item"> <label class="layui-form-label">擅长语言</label> <div class=
"layui-input-block"> <input type="checkbox" name="C#" title="C#"> <input type=
"checkbox" name="C++" title="C++" checked> <input type="checkbox" name="Java"
title="Java"> <input type="checkbox" name="php" title="php"> <input type=
"checkbox" name="JavaScript" title="JavaScript"> <input type="checkbox" name=
"Python" title="Python"> </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="take it easy" 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;//监听提交,这里和 EasyUI 的几乎一样 form.on('submit(formDemo)', function
(data) { layer.msg(JSON.stringify(data.field)); return false; }); }); </script>
</body> </html>
6.blog.html 文档引用

<!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> <fieldset class="layui-elem-field"> <legend>李白简介</legend> <div class=
"layui-field-box"> 李白（701年－762年）
，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。
</div> </fieldset>  <hr class="layui-bg-red">  <blockquote
class="layui-elem-quote"> <p>秦王扫六合，虎视何雄哉！ </p> <p>挥剑决浮云，诸侯尽西来。</p> </blockquote>
</body> </html>
7.pages.html 分页

<!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> <div id="page"></div> <script> layui.use('laypage', function() { //获取页模块
var laypage = layui.laypage; //执行一个laypage实例 laypage.render({ //注意，这里的 page 是
ID，不用加 # 号 elem: 'page', //数据总数，从服务端得到 count: 30, //每页的数据量 limit: 3, //相连页数量
groups:5 }); }); </script> </body> </html>
8.carousel.html 轮播图

<!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> <div class="layui-carousel" id="test"> <div carousel-item> <div> <img src
="https://static.runoob.com/images/mix/img_fjords_wide.jpg"> </div> <div> <img
src="https://static.runoob.com/images/mix/img_nature_wide.jpg"> </div> <div> <
img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg"> </div> </
div> </div> <script> layui.use('carousel', function() { var carousel =
layui.carousel;//建造实例 carousel.render({ elem: '#test', //设置容器宽度，默认600px width:
'600px', //始终显示箭头 arrow: 'always', //切换动画方式，默认左右 anim: 'default',
//是否自动切换,默认true autoplay: true, interval: 1500 }); }); </script> </body> </html>
三、其他

LayUI 特效、… 有心情再更新~

2018/8/29 更新LayUI 的一些应用：
[增删改查] 使用 React + LayUI 做后台管理 CRUD 界面和 RESTful 交互
<https://blog.csdn.net/larger5/article/details/80300968>
[增删改查] Python 之使用 Django + LayUI + MySQL 做单表的 CRUD
<https://blog.csdn.net/larger5/article/details/80905372>
[增删改查] 使用 Vue + LayUI 做后台管理、RESTful 交互
<https://blog.csdn.net/larger5/article/details/81943525>

热门工具换一换

使用新、热、轻量、简单、强大、优美的 LayUI框架 构建前端页面