layui入门
先解压下载的压缩包，然后导入文件：
导入一个layui.css代码和layui.js代码:
<link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"><script src="../layui-v2.5.4/layui.js" type="text/javascript"></script>例子1:hello word:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Layui入门</title> <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"> </head> <body> <script src="../layui-v2.5.4/layui.js" type="text/javascript"></script> <script type="text/javascript"> layui.use(['layer', 'form'], function(){ var layer = layui.layer, form = layui.form; layer.msg('Hello World'); }); </script> </body> </html>结果:
例子2：非模块化方式使用layui:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>入门指南2:非模块化方式使用layui</title> <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"> </head> <body> <script src="../layui-v2.5.4/layui.all.js" type="text/javascript"></script> <script type="text/javascript"> ;!function(){ var layer =layui.layer, form = layui.form; layer.msg("Hello Word2"); } (); </script> </body> </html>结果:
例子3：自定义模块layUI.define：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>入门指南3</title> <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"> </head> <body> <script src="../layui-v2.5.4/layui.all.js" type="text/javascript"></script> <script type="text/javascript"> //自定义模块layUI.define(,) layui.define(['layer','form'],function(exports){ alert('模块定义成功'); //把模块想外抛 exports('mymodel',{}); }); //使用自定义模块 layui.use(['mymodel'],function(){ }); </script> </body> </html>结果:
例子4：运用布局、辅助、背景色进行讲解:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Insert title here</title> <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"> <style type="text/css"> #div1{ background-color: pink; width: 300px; height: 300px; } </style> </head> <body> <div class="layui-main layui-unselect">hhhh</div> <input type="button"value="按钮1" class="layui-disabled"> <div id="div1" class="layui-circle layui-hide"></div><!-- 圆形 --> <div class="layui-bg-cyan">111</div> <div class="layui-bg-green">222</div> <div class="layui-bg-gray">333</div> <script src="../layui-v2.5.4/layui.js" type="text/javascript"></script> <script type="text/javascript"> </script> </body> </html>结果:
案例5：Tab选项卡、自定义属性被调用:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Insert title here</title> <link rel="stylesheet" href="../layui-v2.5.4/css/layui.css"> <style type="text/css"> </style> </head> <body> <div class="layui-main"> <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">标题一</li><!--选中标题1 --> <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> </div> </div> <form action=""> <input type="submit" lay-submit class="lay-btn" lay-filter="login" value="按钮1"/> </form> <script src="../layui-v2.5.4/layui.js" type="text/javascript"></script> <script type="text/javascript"> layui.use(['form'],function(form){ form.on('submit(login)',function(){ alert('自定义事件被调用'); });//绑定事件 }); </script> </body> </html>结果:
来源：51CTO
作者：依呀
链接：https://blog.csdn.net/xiaoyi215/article/details/100134369