组件示例

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

弹出层

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

  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。
    // eg1layer.alert('酷毙了', {icon: 1});// eg2layer.msg('不开心。。', {icon: 5});// eg3layer.load(1); // 格调1的加载

  6. 示例

    // eg1layer.alert('很快乐见到你????', {icon: 6});// eg2layer.msg('你违心和我做敌人么？', {    time: 0, //不主动敞开    btn: ['当然违心', '狠心回绝'], // 按钮    yes: function(index){         layer.close(index); // 敞开以后弹出框        layer.msg('新敌人，你好！', {            icon: 6, // 图标            btn: ['开心','高兴']        });    }});// eg3layer.msg('这是罕用的弹出层');// eg4layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});// eg5layer.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>
根底参数

  1. elem - 绑定元素

    类型：String/DOM，默认值：无必填项，用于绑定执行日期渲染的元素，值个别为选择器，或DOM对象
    laydate.render({   elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等});

  2. 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'});

  3. 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日' //可任意组合});

  4. 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 的工夫戳});