表单
<font color="red">依赖加载模块：form </font>
-
在一个容器中设定 class="layui-form" 来标识一个表单元素块
<form class="layui-form" action=""> </form> -
基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。
<div class="layui-form-item"> <label class="layui-form-label">标签区域</label> <div class="layui-input-block"> 原始表单元素区域 </div> </div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
- required：注册浏览器所规定的必填字段
- lay-verify：注册form模块需要验证的类型
- class="layui-input"：layui.css提供的通用CSS类
下拉选择框
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
- 属性selected可设定默认项
- 属性disabled开启禁用，select和option标签都支持
<select name="city" lay-verify="">
<option value="010">北京</option>
<option value="021" disabled>上海（禁用效果）</option>
<option value="0571" selected>杭州</option>
</select>
- 可以通过 optgroup 标签给select分组
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
- 通过设定属性 lay-search 来开启搜索匹配功能
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
复选框
<h2>默认风格：</h2>
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
<h2>原始风格：</h2>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
- 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
- 属性checked可设定默认选中
- 属性lay-skin可设置复选框的风格 （原始风格：lay-skin="primary"）
- 设置value="1"可自定义值，否则选中时返回的就是默认的on
开关
将复选框checkbox，通过设定 lay-skin="switch" 形成了开关风格
<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
- 属性checked可设定默认开
- 属性disabled开启禁用
- 属性lay-text可自定义开关两种状态的文本 （两种文本用 "|" 隔开）
- 设置value="1"可自定义值，否则选中时返回的就是默认的on
单选框
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
- 属性title可自定义文本
- 属性disabled开启禁用
- 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域
<textarea name="remark" required lay-verify="required" placeholder="请输入个人介绍" class="layui-textarea"></textarea>
- class="layui-textarea"：layui.css提供的通用CSS类
组装行内表单
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
- class="layui-inline"：定义外层行内
- class="layui-input-inline"：定义内层行内
忽略美化渲染
可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。
<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表单方框风格
通过追加 layui-form-pane 的class，来设定表单的方框风格。
<form class="layui-form layui-form-pane" action="">
<!--
内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则 会看起来比较别扭），如：
-->
<div class="layui-form-item" pane>
<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>
</form>
组件示例
弹出层
<font color="red">模块加载名称：layer，独立版本：layer.layui.com</font>
使用场景
由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。
| 场景 | 用前准备 | 调用方式 |
|---|---|---|
| 1. 作为独立组件使用 | 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 | 通过script标签引入layer.js后，直接用即可。 |
| 2. layui 模块化使用 | 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js | 通过layui.use('layer', callback)加载模块 |
-
作为独立组件使用 layer
<!-- 引入好layer.js后，直接用即可 --> <script src="layer.js"></script> <script> layer.msg('hello'); </script> -
在 layui 中使用 layer
layui.use('layer', function(){ var layer = layui.layer; layer.msg('hello'); });
基础参数
-
type - 基本层类型
类型：Number，默认：0 可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层） -
title - 标题
类型：String/Array/Boolean，默认：'信息' title支持三种类型的值： 若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本； 若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式； 若你不想显示标题栏，可以 title: false； -
content - 内容
类型：String/DOM/Array，默认：'' content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。/* 信息框 */ layer.open({ type:0, title:"系统消息", // content可以传入任意的文本或html content:"Hello" }); /* 页面层 */ layer.open({ type:1, title:"系统消息", // content可以传入任意的文本或html content:"<div style='height:100px;width:200px'>Hello</div>" }); /* iframe */ layer.open({ type:2, title:"系统消息", // content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no'] content:"http://www.baidu.com" // content:["http://www.baidu.com",'no'] }); /* tips层 */ layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM }); -
area - 宽高
类型：String/Array，默认：'auto' 在默认状态下，layer是宽高都自适应的。 当定义宽度时，你可以area: '500px'，高度仍然是自适应的。 当宽高都要定义时，你可以area: ['500px', '300px']。 -
icon - 图标
注：信息框和加载层的私有参数。 类型：Number，默认：-1（信息框）/0（加载层） 信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。// eg1 layer.alert('酷毙了', {icon: 1}); // eg2 layer.msg('不开心。。', {icon: 5}); // eg3 layer.load(1); // 风格1的加载 -
示例
// eg1 layer.alert('很高兴见到你😊', {icon: 6}); // eg2 layer.msg('你愿意和我做朋友么？', { time: 0, //不自动关闭 btn: ['当然愿意', '狠心拒绝'], // 按钮 yes: function(index){ layer.close(index); // 关闭当前弹出框 layer.msg('新朋友，你好！', { icon: 6, // 图标 btn: ['开心','快乐'] }); } }); // eg3 layer.msg('这是常用的弹出层'); // eg4 layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5}); // eg5 layer.msg('玩命加载中...=￣ω￣=', function(){ // 关闭后的操作 layer.msg('(⊙o⊙)？'); });
