layui 字表_layUI表单--乐字节前端

表单

​ 依赖加载模块：form

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

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

标签区域

原始表单元素区域

输入框

required：注册浏览器所规定的必填字段

lay-verify：注册form模块需要验证的类型

class="layui-input"：layui.css提供的通用CSS类

下拉选择框

请选择一个城市

北京

上海

杭州

属性selected可设定默认项

属性disabled开启禁用，select和option标签都支持

北京

上海(禁用效果)

杭州

可以通过 optgroup 标签给select分组

请选择

你工作的第一个城市？

你的工号？

你最喜欢的老师？

通过设定属性 lay-search 来开启搜索匹配功能

layer

form

layim

复选框

默认风格：

原始风格：

属性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类

组装行内表单

范围

autocomplete="off" class="layui-input">

-

autocomplete="off" class="layui-input">

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

作为独立组件使用 layer

layer.msg('hello');

在 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:"

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

});

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

});