フロントエンドフレームLayUI使用履歴

仕事の中で、急速な開発が必要で、ウェブサイトを構築します.layUI、eChars、elementなど、様々なフロントエンドフレームが必要です.以前は使用が少なかったですが、今は学習記録を作ります.
一、LayUIフロントフレーム

layerポップアップ層コンポーネント効果――layuiの弾層モジュールは、単独でlayerを使用することができ、Jquery

に依存する.

layDate日付セレクタコンポーネント、layuiの日付コンポーネントは、laydate

を単独で使用することができます.
二、使用導入

    
    
    
        //         ，      。
        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: ['  ','  ']
                    })
                })
            }
        }
     

1.1弾層

// layer   5    。      ：0（   ，  ） 1（   ） 2（iframe ） 3（   ） 4（tips ）。     layer.open({type: 1})    ， type    （     ）

// 1、   -  
layer.msg('    ');
// 2、   -    
layer.confirm('    ',{
        btn:['ok','no']      //    
    },function(){
    //      
    }, function(){
    //      
});
// 3、    ，      
layer.tips('    ','#div1',{ //              
    tips:[1,'#3595CC'],  //   
    time:2000  //    
})
// 4、    
layer.prompt('     ')
// 5、  ，   iframe 
layui.use('layer', function(){
    layerPage = layui.layer;
    var = _name = admin;
    iframeObjectIndex = layerPage.open({
        title: 'newTitle', //     
        type: 2, //     ，   2
        offset: 'auto', //     
        area:['1000px', '500px'], //     ，         
        content: 'test.html?name='+ _name; //     +   
    })
})
// 6、  ，       
//  body     dom  ，   


    layui.use('layer', function(){
        layer.open({
            title: 'newTitle', //     
            type: 1, //     
            closeBtn: 1, //     ，0   ，1/2  
            btn: ['yes', 'no'], //   
            offset: 'auto', //     
            area: ['400px', '200px'], //     
            content: $('#lay1'), //       
            yes: function() {
                //        
            },
            btn2: function() {
                //        
            },
            cancel: function() {
                //        
            }
        })
    })

2.1 日期组件

//        layui   ，         
// layui   


layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //    laydate  
  laydate.render({
    elem: '#test1' //    
  });
});

//       


//    laydate  
laydate.render({
  elem: '#test1' //    
});