前端框架LayUI使用记录

工作中，需要快速开发，搭建网站。需要各种前端框架，比如说BootStrap、eChars、layUI等。之前使用较少，现做一个学习记录。

一、LayUI前端框架

1. layer 弹出层组件效果
   --layui的弹层模块可以单独使用layer，依赖Jquery
2. layDate 日期选择器组件
   --layui的日期组件可单独使用laydate
3. layIM 即时通信组件

二、使用引入

<link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script>
        // 将文件下载到本地，在文件中引用。
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
            // 调用layer对象的confirm()方法，传入信息，按钮，函数
                layer.confirm('明天放假吗？',{
                    btn:['放假','不放'] //按钮
                },function(){
                // layer.msg 一个弹层
                    layer.msg('努力工作，将宝贵的时间，花在重要的地方',{icon:1});
                },function(){
                    layer.msg('继续加油，青春易逝，要在30岁收入更多',{
                        time: 2000,
                        btn: ['加油','放弃']
                    })
                })
            }
        }
    </script>

1.1 弹层

// 弹层
layer.msg('弹层信息');
// 可选弹层
layer.confirm('提示信息',{
        btn:['ok','no']      //选择信息
    },function(){
    // 第一个执行
    }, function(){
    // 第二个执行
});
// 提示信息，一般用于表单
layer.tips('提示信息','#div1',{ // 提示信息  依附于哪个元素
    tips:[1,'#3595CC'],  // 样式
    time:2000  //显示时间
})
// 输入弹层
layer.prompt('请输入密钥')

2.1 日期组件

// 日期组件可以在layui中使用，也可以作为组件使用
// layui中使用
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
// 单独作为组件
<script src="laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({
  elem: '#test1' //指定元素
});
</script>