layUI表单–乐字节前端

大家好，欢迎来到IT知识分享网。

表单

依赖加载模块：form

1. 在一个容器中设定 class=”layui-form” 来标识一个表单元素块

<form class="layui-form" action="">     </form>

1. 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义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>

组件示例

弹出层

模块加载名称：layer，独立版本：layer.layui.com

使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

1. 作为独立组件使用 layer

<!-- 引入好layer.js后，直接用即可 --> <script src="layer.js"></script> <script> layer.msg('hello'); </script>

2.在 layui 中使用 layer

layui.use('layer', function(){  var layer = layui.layer;    layer.msg('hello'); });

基础参数

1. type – 基本层类型

类型：Number，默认：0 ​ 可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层）

2.title – 标题

类型：String/Array/Boolean，默认：'信息' ​ title支持三种类型的值： 若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本； 若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式； 若你不想显示标题栏，可以 title: false；

3.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
});
​

4.area – 宽高

类型：String/Array，默认：'auto' ​ 在默认状态下，layer是宽高都自适应的。 当定义宽度时，你可以area: '500px'，高度仍然是自适应的。 当宽高都要定义时，你可以area: ['500px', '300px']。

5.icon – 图标

注：信息框和加载层的私有参数。 ​ 类型：Number，默认：-1（信息框）/0（加载层） ​ 信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。

// eg1 layer.alert('酷毙了', {icon: 1}); // eg2 layer.msg('不开心。。', {icon: 5}); // eg3 layer.load(1); // 风格1的加载

6.示例

// 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⊙)？'); });