Layui镜像站-经典开源模块化前端 UI 框架(官方文档完整镜像)
下载框架包
点击文档，可进入学习界面
1.引入框架包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<!-- 引入核心css文件 -->
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
<!-- 引入核心js文件 -->
<script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
</body>
</html>2.定义模块和使用模块
//layui 模块的定义 layui.define([models],callback)
layui.define(['layer', 'form'], function(exports){ //[models]这里是指即将定义的这个模块是依赖于layer，form模块
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
exports('mod1', {}); //exports把定义的模块暴露出去
//注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致
});
//layui 模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
}); CSS内置公共基础类
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<!-- 引入核心css文件 -->
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
<!-- 引入核心js文件 -->
<script src="./layui-v2.6.8/layui/layui.js"></script>
<style>
.layui-container {
border: 1px solid red;
}
</style>
</head>
<body>
<!-- layui-containe容器，会随着页面放大缩小自适应，左右两边空白等距 -->
<div class="layui-container">
<!-- layui-form 表单 -->
<form class="layui-form" action="">
<!-- layui-form-item form表单每一项 -->
<div class="layui-form-item">
<!-- layui-form-label form表单中的label -->
<label class="layui-form-label">输入框</label>
<!-- layui-input-block 声明此div块级元素 -->
<div class="layui-input-block">
<!-- layui-input input输入框 required 和 lay-verify="required" 一起使用表单校验功能 -->
<input class="layui-input" type="text" name="tittle" placeholder="请输入标题" required lay-verify="required" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input class="layui-input" type="password" name="password" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" >
</div>
<!-- layui-word-aux灰色标注性文字 layui-form-mid 居中 layui-font-12 字体大小-->
<div class="layui-form-mid layui-word-aux layui-font-12">密码需包含大写字母、小写字母和数字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<!-- select 下拉框 -->
<select name="city" lay-verify="required">
<!-- option下来选择框 第一个为空不写 页面会自动显示请选择 -->
<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">
<!-- checkbox 多选框 如果只有一个 可以美化为开关样式 lay-skin="switch" -->
<input type="checkbox" name="" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<!-- radio 单选框 -->
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多选框</label>
<div class="layui-input-block">
<input type="checkbox" name="" title="写作">
<input type="checkbox" name="" title="阅读" checked>
<input type="checkbox" name="" title="发呆">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本框</label>
<div class="layui-input-block">
<!-- layui-textarea 文本框-->
<textarea class="layui-textarea" name="" placeholder="请输入内容(不超过100字)" ></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<!-- layui-btn layui-btn-primary 按钮样式 -->
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<!-- reset 重置 -->
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- lay-submit 用于定义表单中的提交按钮 当用户点击提交按钮时，会触发表单提交事件 -->
<!-- lay-filter="formDemo" 用于筛选表单中特定的元素或定义表单的过滤器 在Layui中，通过使用lay-filter属性，可以对表单中的某个元素或整个表单进行事件监听或操作 -->
</div>
</body>
<script>
//Demo
layui.use('form', function () {
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function (data) {
layer.msg(JSON.stringify(data.field));
return false; //阻止表单提交
});
});
</script>
</html>
如果为空提交
填好提交
![[python bezier贝塞尔曲线] 数值解法、德卡斯特里奥解法解法以及bezier库的使用demo](https://img-blog.csdnimg.cn/30e4862eb7a94835a13d34b2d605181a.png)