本文详细介绍layui框架的安装、配置及核心组件的使用方法，包括表单验证、图标使用、模块加载等特性，并提供了一个完整的后台布局示例。
1、下载: http://www.layui.com/
2、使用
src文件夹,全部拷贝到项目
导入
layui.css和layui.js
<link rel="stylesheet" type="text/css" href="../src/css/layui.css"/>
<script src="../src/layui.js" type="text/javascript" charset="utf-8"></script>
layui-开头、 <div class="layui-col-lg9"/>
3、layui模板:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui模板</title>
<!--导包-->
<link rel="stylesheet" type="text/css" href="../src/css/layui.css"/>
<script type="text/javascript" src="../src/layui.js" ></script>
</head>
<body>
</body>
</html>
4、js对象,key 不用引号' " var jsObj = {username:"张三",age:18}; json json key 必须加引号
{"title":"213123","password":"2313","city":"1","like[read]":"on","sex":"女","desc":""}
5、模块加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui模板</title>
<!--导包-->
<link rel="stylesheet" type="text/css" href="../src/css/layui.css"/>
<script type="text/javascript" src="../src/layui.js" ></script>
</head>
<body>
<button class="layui-btn" onclick="del()">删除</button>
</body>
<script type="text/javascript">
function del(){
layui.use("layer",function(){
var layer = layui.layer;
// layer.open({
// type: 1,
// icon: 5,
// title: "删除",
// content: '删除成功!!!',
// area: ['300px', '200px'],
// time: 2000,
// offset: 'rb',
//
// });
//iframe窗
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '//fly.layui.com/'
});
}
});
});
}
</script>
<!--<script type="text/javascript">
//加載需要使用的layui模块
layui.use("layer",function(){
var layer = layui.layer;
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
});
</script>-->
</html>
6、layui图标使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导包-->
<link rel="stylesheet" type="text/css" href="../src/css/layui.css"/>
<script type="text/javascript" src="../src/layui.js" ></script>
</head>
<body class="layui-bg-blue">
<i class="layui-icon" style="font-size: 30px; color: red;"></i>
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
<div onclick="rotate(this)" style="width: 100px; height: 100px; margin: auto;" class="layui-bg-red layui-anim layui-anim-rotate"></div>
<br/>
<hr/>
<button class="layui-btn">
一个标准的按钮
<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>
</button>
</body>
<script type="text/javascript">
// alert("111");
function rotate(divDom){
//layui加载模块
layui.use("element",function(){
var $ = layui.$;
$(divDom).removeClass("layui-anim-rotate");
//延时
setTimeout(function(){
$(divDom).addClass("layui-anim-rotate");
},10);
});
}
</script>
</html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>layui模板</title><!--导包--><link rel="stylesheet" type="text/css" href="../src/css/layui.css" /><script type="text/javascript" src="../src/layui.js"></script></head><body><form class="layui-form" action="" method="get"><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="请输入标题" autocomplete="off" class="layui-input" lay-verType="tips"></div></div><div class="layui-form-item"><label class="layui-form-label">密码框</label><div class="layui-input-inline"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">辅助文字</div></div><div class="layui-form-item"><label class="layui-form-label">选择框</label><div class="layui-input-block"><select name="city" lay-verify="required"><option value=""></option><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">复选框</label><div class="layui-input-block"><input type="checkbox" name="like[write]" title="写作"><input type="checkbox" name="like[read]" title="阅读" checked><input type="checkbox" name="like[dai]" title="发呆"></div></div><div class="layui-form-item"><label class="layui-form-label">开关</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch"></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="请输入内容" 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>//Demolayui.use('form', function() {var form = layui.form;//监听提交form.on('submit(formDemo)', function(data) {layer.msg(JSON.stringify(data.field));return false;});});</script></body></html>
8、layui框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body class="layui-layout-body">
<!--第一行-->
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<a href="">控制台</a>
</li>
<li class="layui-nav-item">
<a href="">商品管理</a>
</li>
<li class="layui-nav-item">
<a href="">用户</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd>
<a href="">邮件管理</a>
</dd>
<dd>
<a href="">消息管理</a>
</dd>
<dd>
<a href="">授权管理</a>
</dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
</a>
<dl class="layui-nav-child">
<dd>
<a href="">基本资料</a>
</dd>
<dd>
<a href="">安全设置</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="">退了</a>
</li>
</ul>
</div>
<!--左边列表-->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript: void(0);" onclick="forwardTo('../../lesson7-bootstrapvalidator/html/register1.html')">列表一</a>
</dd>
<dd>
<a href="javascript:;">列表二</a>
</dd>
<dd>
<a href="javascript:;">列表三</a>
</dd>
<dd>
<a href="">超链接</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;">列表一</a>
</dd>
<dd>
<a href="javascript:;">列表二</a>
</dd>
<dd>
<a href="">超链接</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="">云市场</a>
</li>
<li class="layui-nav-item">
<a href="">发布商品</a>
</li>
</ul>
</div>
</div>
<!-- 内容主体区域 -->
<div class="layui-body">
<iframe id="centerFrame" src="https://www.baidu.com" width="100%" height="100%"></iframe>
</div>
<!-- 底部固定区域 -->
<div class="layui-footer">
© layui.com - 底部固定区域
</div>
</div>
<script type="text/javascript" src="../src/layui.js" ></script>
<script>
//JavaScript代码区域
layui.use('element', function() {
var element = layui.element;
});
</script>
<script type="text/javascript">
var centerFrame = document.getElementById("centerFrame");
function forwardTo(path){
alert(path);
centerFrame.src = path;
}
</script>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
