一、layer是什么
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
二、layer的使用步骤
1.下载layer
在这个地址;http://www.layui.com,下载好压缩包。
2.导入layer
获取layer文件包后,解压并将layer整个文件夹(不要拆分)存放到你项目的任意目录,只需要引入layui.css,layui.all.jss文件就可以了。
<!--///引用layui.css文件-->
<link rel="stylesheet" href="lib/css/layui.css">
<!--引用layui.all.js文件-->
<script type="text/javascript" src="lib/layui/layui.all.js"></script>
3.使用layer
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--///引用layui.css文件-->
<link rel="stylesheet" href="lib/css/layui.css">
<!--引用layui.all.js文件-->
<script type="text/javascript" src="lib/layui/layui.all.js"></script>
</head>
<body>
<br><br><br><br>
<div class="layui-btn layui-btn-primary" onclick="openshow()">打开</div></div><br>
</body>
<script type="text/javascript">
;
function openshow(){
//使用layer打开一个加载动图
layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
}
</script>
</html>
4.效果: