表单

​ 依赖加载模块：form

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

  2. 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。

    
    
    
    
    原始表单元素区域
输入框
  • required：注册浏览器所规定的必填字段
  • lay-verify：注册form模块需要验证的类型
  • class="layui-input"：layui.css提供的通用CSS类
下拉选择框
  • 属性selected可设定默认项
  • 属性disabled开启禁用，select和option标签都支持
  • 可以通过 optgroup 标签给select分组
  • 通过设定属性 lay-search 来开启搜索匹配功能
复选框
默认风格：


 
 


原始风格：
  • 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
  • 属性checked可设定默认选中
  • 属性lay-skin可设置复选框的风格 （原始风格：lay-skin="primary"）
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on
开关

将复选框checkbox，通过设定 lay-skin="switch" 形成了开关风格
  • 属性checked可设定默认开
  • 属性disabled开启禁用
  • 属性lay-text可自定义开关两种状态的文本 （两种文本用 "|" 隔开）
  • 设置value="1"可自定义值，否则选中时返回的就是默认的on
单选框
  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域
  • class="layui-textarea"：layui.css提供的通用CSS类
组装行内表单

    

        
        

          
        

        
-
  • class="layui-inline"：定义外层行内
  • class="layui-input-inline"：定义内层行内
忽略美化渲染

​ 可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。

表单方框风格

​ 通过追加 layui-form-pane 的class，来设定表单的方框风格。

组件示例

弹出层

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

使用场景

由于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)加载模块

  1. 作为独立组件使用 layer

  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:"
    Hello
    "
});

/* 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('很高兴见到你