前端框架LayUI使用記錄

工做中，須要快速開發，搭建網站。須要各類前端框架，好比說BootStrap、eChars、layUI等。以前使用較少，現作一個學習記錄。

1、LayUI前端框架

1. layer 彈出層組件效果
   --layui的彈層模塊能夠單獨使用layer，依賴Jquery
2. layDate 日期選擇器組件
   --layui的日期組件可單獨使用laydate
3. layIM 即時通訊組件

2、使用引入

<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>