layui框架（layui简介和form表单的样式添加）
⼀、layui简介
1、 layui（谐⾳：类UI) 是⼀款采⽤⾃⾝模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即⽤。其外在极简，却⼜不失饱满的内在，体积轻盈，组件丰盈，从核⼼代码到 API 的每⼀处细节都经过精⼼雕琢，⾮常适合界⾯的快速开发。layui ⾸个版本发布于 2016 年⾦秋，她区别于那些基于 MVVM 底层的 UI 框架，却并⾮逆道⽽⾏，⽽是信奉返璞归真之道。准确地说，她更多是为服务端程序员量⾝定做，你⽆需涉⾜各种前端⼯具的复杂配置，只需⾯对浏览器本⾝，让⼀切你所需要的元素与交互，从这⾥信⼿拈来。
2、⽬录结构
3、⽂件的引⽤
⼆、如何简单的使⽤layui框架
layui.use()⽅法：加载所需模块；
当你使⽤表单时，layui 会对 select、checkbox、radio 等原始元素隐藏，从⽽进⾏美化修饰处理。但这需要依赖于 form 组件，所以你必须加载 form，并且执⾏⼀个实例。
<script>
//⼀般直接写在⼀个js⽂件中
layui.use(['layer','form'],function(){
var layer = layui.layer
,form = layui.form;//只有执⾏了这⼀步，部分表单元素才会⾃动修饰成功
layer.msg('Hello World');
});//弹框
</script>
三、form表单每个标签的常⽤class属性
1、form标签
class：layui-form
<form action=""method="post"class="layui-form"></form>
2、输⼊框代码书写格式
外层div的class：layui-form-item；
lable：layui-form-label；
内层div的class：layui-input-inline；
输⼊框的class：layui-input；
<div class="layui-form-item">
<label class="layui-form-label">⽤户名</label>
<div class="layui-input-inline">
<input type="text"name="useraName"required lay-verify="required"placeholder="请输⼊⽤户名"class="layui-input"/> </div>
</div>
3、单选框
和输⼊框不同的地⽅就是单选框的class属性值不同
单选框的class：layui-radio-disbaled
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="radio"name="sex"class="layui-radio-disbaled"value="男"title="男"checked="checked"/>
<input type="radio"name="sex"class="layui-radio-disbaled"value="⼥"title="⼥"/>
</div>
</div>
4、复选框
lay-skin=“primary”：原始复选框
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<input type="checkbox"name="exercise"value="运动"title="运动"checked="checked"lay-skin="primary">
<input type="checkbox"name="music"value="听⾳乐"title="听⾳乐">
<input type="checkbox"name="book"value="看书"title="看书">
<input type="checkbox"name="movie"value="看电影"title="看电影">
<input type="checkbox"name="movie"value="旅游"title="旅游"disabled="disabled">
</div>
</div>
5、下拉框
<div class="layui-form-item">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<select name="clazz"lay-verify="required">
<option value=""></option>
<option value="1班">1班</option>
<option value="2班">2班</option>
<option value="3班">3班</option>
<option value="4班">4班</option>
<option value="5班"disabled="disabled">5班</option>
</select>
</div>
</div>
6、⽂本域
<div class="layui-form-item">
<label class="layui-form-label">留⾔</label>
<div class="layui-input-inline">
<textarea name="leave"placeholder="请输⼊你的留⾔"class="layui-textarea"lay-verify="required"></textarea> </div>
</div>
7、开关按钮
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-inline">
<input type="checkbox"checked="checked"name="close"lay-skin="switch"lay-text="ON|OFF"/>
</div>
</div>cssclass属性
8、提交submit和重置reset
class=“layui-btn layui-btn-normal”
按钮的样式class较多，有如下⼏个
<button type="button"class="layui-btn layui-btn-primary">原始按钮</button>
<button type="button"class="layui-btn">默认按钮</button>
<button type="button"class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button"class="layui-btn layui-btn-warm">暖⾊按钮</button>
<button type="button"class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button"class="layui-btn layui-btn-disabled">禁⽤按钮</button>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal"lay-submit lay-filter="formDemo">⽴即提交</button>
<button type="reset"class="layui-btn layui-btn-danger">重置</button>
</div>
</div>
9、表单的赋值
10、⾃定义验证规则
这⾥的title是输⼊框的lay-verify属性的值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。