LayUI入门基础篇3乐字节架构大数据

如果须要更多材料点击下方图片加好友支付⬇（注明来意）

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

<font color=”red”> 模块加载名称：laydate，独立版本：http://www.layui.com/laydate/…

layDate 蕴含了大量的更新，其中次要以：年选择器 、 年月选择器 、 日期选择器 、 工夫选择器 、 日期工夫选择器 五种类型的抉择形式。

疾速应用

和 layer 一样，能够在 layui 中应用 layDate，也可间接应用 layDate 独立版，请依照理论需要来抉择。

场景	用前筹备	调用形式
1. layui 模块化应用	下载 layui 后，引入 layui.css 和layui.js即可	通过 layui.use(‘laydate’, callback) 加载模块后，再调用办法
2. 作为独立组件应用	去 layDate 独立版本官网下载组件包，引入 laydate.js 即可	间接调用办法应用

在 layui 模块中应用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 日期与工夫抉择 </title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="date1" />
        </div>
    </body>
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laydate', function(){
          var laydate = layui.laydate;
          
          // 执行一个 laydate 实例
          laydate.render({elem: '#date1' // 指定元素});
        });
    </script>
</html>

根底参数

elem – 绑定元素

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值个别为选择器，或 DOM 对象

laydate.render({elem: '#test' // 或 elem: document.getElementById('test')、elem: lay('#test') 等
});

type – 控件抉择类型

类型：String，默认值：date

用于独自提供不同的选择器类型，可选值如下表：

type 可选值	名称	用处
year	年选择器	只提供年列表抉择
month	年月选择器	只提供年、月抉择
date	日期选择器	可抉择：年、月、日。type 默认值，个别可不填
time	工夫选择器	只提供时、分、秒抉择
datetime	日期工夫选择器	可抉择：年、月、日、时、分、秒

// 年选择器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});
 
// 年月选择器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});
 
// 日期选择器
laydate.render({ 
  elem: '#test'
  //,type: 'date' // 默认，可不填
});
 
// 工夫选择器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});
 
// 日期工夫选择器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});

format – 自定义格局

类型：String，默认值：yyyy-MM-dd

通过日期工夫各自的格局符和长度，来设定一个你所须要的日期格局。layDate 反对的格局如下：

格局符	阐明
yyyy	年份，至多四位数。如果有余四位，则后面补零
y	年份，不限度位数，即不论年份多少位，后面均不补零
MM	月份，至多两位数。如果有余两位，则后面补零。
M	月份，容许一位数。
dd	日期，至多两位数。如果有余两位，则后面补零。
d	日期，容许一位数。
HH	小时，至多两位数。如果有余两位，则后面补零。
H	小时，容许一位数。
mm	分钟，至多两位数。如果有余两位，则后面补零。
m	分钟，容许一位数。
ss	秒数，至多两位数。如果有余两位，则后面补零。
s	秒数，容许一位数。

通过上述不同的格局符组合成一段日期工夫字符串，可任意排版。

// 自定义日期格局
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy 年 MM 月 dd 日' // 可任意组合
});

value – 初始值

类型：String，默认值：new Date()

反对传入合乎 format 参数设定的日期格局字符，或者 new Date()

// 传入合乎 format 格局的字符给初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' // 必须遵循 format 参数设定的格局
});
 
// 传入 Date 对象给初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的工夫戳
});

组件示例

弹出层

应用场景

根底参数

日期与工夫抉择

疾速应用

根底参数