eclipse中LayUI的使用

web前端框架之LayUI

开发环境：eclipse
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，无需涉足各种前端工具的复杂配置，只需面对浏览器本身，非常适合界面的快速开发。

1.从LayUI官网下载

2.导入到eclipse

下载下来的包解压，直接将layui文件夹复制到对应工程webcontent目录下

3.引用
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<style type="text/css">

到此就可以使用LayUI开发自己的界面啦

使用示例

使用LayUI框架开发简单的用户注册、登录

login.html
<html>
<head>
<title>登录输入框</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<style type="text/css">
body {background:#e7e7e7 ;background: #e7e7e7 url(' img/logo.png');
}.container {width: 400px;height: 280px;position: absolute;left: 50%;top: 50%;margin-left: -200px;margin-top: -140px;border-radius: 8px;background: #fff;box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
}
</style>
<script src="layui/layui.js"></script>
<script>//Demolayui.use('form', function() {var form = layui.form;//监听提交form.on('submit(formDemo)', function(data) {if (data.field.username=="Liu" && data.field.password=="12345"){layer.msg("登录成功！");}else{layer.msg("登录失败！");} return false;});});</script></head>
<body><form class="layui-form" aciton=""><div class="container"><headerstyle="margin-top: 10px; margin-bottom: 20px; text-align: center"><h1>用户登录</h1></header><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-inline "><i class="layui-icon layui-icon-username"style="font-size: 20px; position: absolute; margin-top: 5px"></i><input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input"style="padding-left: 25px"></div></div><div class="layui-form-item"><label class="layui-form-label">密 &nbsp;&nbsp;码</label><div class="layui-input-inline"><i class="layui-icon layui-icon-password"style="font-size: 20px; position: absolute; margin-top: 5px"></i><input type="password" name="password" requiredlay-verify="required" placeholder="请输入密码" autocomplete="off"class="layui-input" style="padding-left: 25px"></div></div><div class="layui-form-item" style="text-align: center"><button type="submit" class="layui-btn layui-btn-radius"  lay-submit lay-filter="formDemo">登&nbsp;&nbsp;录</button><button type="reset" class="layui-btn layui-btn-radius">重&nbsp;&nbsp;置</button></div><div class="layui-form-item"><a href="" style="margin-left: 80px">忘记密码?</a><a href="register.html"style="margin-left: 100px">立即注册</a></div></div></form>
</body>
</html>
register.html

用户名、密码使用自定义验证，邮箱使用内置验证

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<style type="text/css">
body {background:#e7e7e7 ;background: #e7e7e7 url(' img/logo.png');
}.container {width: 400px;height: 360px;position: absolute;left: 50%;top: 50%;margin-left: -200px;margin-top: -140px;border-radius: 8px;background: #fff;box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
}
</style>
<script src="layui/layui.js"></script>
<script>
layui.use('form', function() {var form = layui.form;//自定义验证form.verify({username : function(value){if(value.length<6){return '用户名不能少于5个字符';}},pass : [/^[\S]{6,12}$/,'密码6-12位，且包括字符和数字，不包括空格'],confirmpass :function(value){$ = layui.jquery;var psword1=$('#password1').val();if(psword1!=value)return '两次密码输入不一致！';}})
});
</script>
</head>
<body>
<form class="layui-form" aciton=""><div class="container"><headerstyle="margin-top: 10px; margin-bottom: 20px; text-align: center"><h1>用户注册</h1></header><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-inline "><i class="layui-icon layui-icon-username"style="font-size: 20px; position: absolute; margin-top: 5px"></i><input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="请输入用户名" class="layui-input"style="padding-left: 25px"></div></div><div class="layui-form-item"><label class="layui-form-label">密 &nbsp;&nbsp;码</label><div class="layui-input-inline"><i class="layui-icon layui-icon-password"style="font-size: 20px; position: absolute; margin-top: 5px"></i><input type="password" name="password" requiredlay-verify="required|pass" placeholder="请输入密码" autocomplete="off"class="layui-input" style="padding-left: 25px"></div></div><div class="layui-form-item"><label class="layui-form-label">确认密码</label><div class="layui-input-inline"><i class="layui-icon layui-icon-password"style="font-size: 20px; position: absolute; margin-top: 5px"></i><input type="password" name="password" requiredlay-verify="confirmpass" placeholder="请再次输入密码" autocomplete="off"class="layui-input" style="padding-left: 25px"></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱地址</label><div class="layui-input-inline"><i class="layui-icon layui-icon-email"style="font-size: 20px; position: absolute; margin-top: 5px"></i><input type="email" name="email"  requiredlay-verify="required|email" placeholder="请输入邮箱地址" autocomplete="off"class="layui-input" style="padding-left: 25px"></div></div><div class="layui-form-item" style="text-align: center"><button type="submit" class="layui-btn layui-btn-radius"  lay-submit lay-filter="formDemo">提&nbsp;&nbsp;交</button><button type="reset" class="layui-btn layui-btn-radius">重&nbsp;&nbsp;置</button></div></div></form>
</body>
</html>

实现的效果