layui入门笔记

缺乏、安全感 2022-05-24 04:29 150阅读 0赞

## 介绍 ##

> layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

## 相关链接 ##

*  [layui官网][layui]
 *  [layui文档][layui 1]

## 样例 ##

// 防止用户一下点击多次发放按钮
    var isPost = false;
    // 发放
    $("#send").click(function () { 
        var checkboxs = $('#table').bootstrapTable('getSelections');
        if (checkboxs.length == 0) { 
            layer.msg("请选择发放的数据!");
            return;
        }
        var list = [];
        for (var i = 0; i < checkboxs.length; i++) { 
        	if(checkboxs[i].sendState == '2'){ 
                layer.msg("含有已发放数据，请重新选择!");
                return;
        	}
        	if(checkboxs[i].sendState == '3'){ 
                layer.msg("含有不予发放数据，请重新选择!");
                return;
        	}
            list.push(checkboxs[i].id);
        }
        layer.open({ 
            title:"确认发放？",
            type: 1,
            offset: "auto", // 具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
            id: 'LAY_demo', // 防止重复弹出
            content: '<div style="padding: 20px 100px;">发放后，不可撤销，是否继续</div>',
            btn: ['确认', '取消'],
            btnAlign: 'c', // 按钮居中
            yes: function () { 
                if(!isPost){ 
                    //弹窗提示
                    layer.load(0.3, { shade: [0.3,'#fff']});
                    $.ajax({ 
                        url:"senddetail/sendByIds",
                        type:"POST",
                        data:{ 
                            ids: JSON.stringify(list)
                        },
                        dataType:"json",
                        // 发送请求前调用的函数
                        beforeSend:function(){ 
                            isPost = true;
                        },
                        // 请求完成后回调函数 (请求成功或失败之后均调用)
                        complete: function(XMLHttpRequest, textStatus){ 
                            isPost = false;
                        },
                        success:function(data){ 
                            layer.closeAll();
                            layer.alert(data.msg);
                            $('#table').bootstrapTable('refresh', { url:'senddetail/querySendData'});
                        },
                        //调用出错执行的函数
                        error: function(){ 
                            layer.closeAll();
                            //请求出错处理
                            layer.alert("发放失败");
                        }
                    });
    
                }
            },
        });
    });

## 入门学习 ##

## 展示图片 ##

// 图片展示
    function showImg(recordImg) { 
        var html = '<div>暂无图片</div>';
        if (recordImg != '') { 
            html = '';
            var imgArr = recordImg.split(',');
            for (var i = 0; i < imgArr.length; i++) { 
                html = html + '<div><img src=\'' + imgArr[i] + '\'/> </div>';
            }
        }
        layer.open({ 
            type: 1,
            title: '图片展示',
            area: ['90%', '90%'],
            maxmin: true,//允许全屏最小化
            anim: 1,//0-6的动画形式，-1不开启
            content: html
        });
    }

### 项目实例 ###

*  Spring整合Quartz

// 设置并发为false
    bean.setConcurrent(false);

*  button页面刷新

> 必须要加上：type=“button”，否则会导致页面刷新，执行click方法异常

*  遮罩

> [具体配置][Link 1]

layer.load(0.3, { shade: [0.3, '#fff']});

*  清除文本框内容

<input type="text" name="destination" id="destination" autocomplete="off" class="layui-input" data-provide="typeahead">
    <i class="icon_ca_layui" ></i>  //必须加上
    
    --js文件中必须要有
    var form = layui.form(), layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate,
           test = layui.test, autocomplete = layui.autocomplete, clipboard = layui.clipboard, element = layui
               .element();
       test.restVal();  //必须加上
       test.selectMove();
       test.multiSelect();

### 下载源码 ###

最新版源码为layui-v2.3.0-rc1.zip，其目录结构如下：  
![这里写图片描述][70]

子目录layui目录结构如下：  
![这里写图片描述][70 1]

说明如下【[摘自官网][layui 1]】：

├─css //css目录
      │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心样式文件
      ├─font  //字体图标目录
      ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
      │─lay //模块核心目录
      │  └─modules //各模块组件
      │─layui.js //基础核心库
      └─layui.all.js //包含layui.js和所有模块的合并文件

## 快速上手 ##

### 项目所需引入layui的文件 ###

*  获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
    ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

*  Web 弹层组件layer

> JS文件中DEMO示例，[点击查看layer.open的基础参数][layer.open]

layer.open({ 
         type: 1,
         title: '预警设置',
         area: ['690px', '230px'],
         content: $('#editForm'),
         btn: ['确定', '取消'],
         success: function (layero, index) { 
                 $("#isWarning").val(grid.isWarning);
                 $("#warningPhone").val(grid.warningPhone);
                 $("#warningNum").val(grid.warningNum);
                 var form = layui.form();
                 form.render();
             },
             end: function () { 
                 $("#warningDiv form input").each(function () { 
                     $(this).val('');
                 });
             },
             yes: function (index, layero) { 
                 if ($.trim($("#warningPhone").val()) == "") { 
                     layer.msg("填写预警手机号");
                     return;
                 }
                 if ($.trim($("#warningNum").val()) == "" || $.trim($("#warningNum").val()) == "0") { 
                     layer.msg("填写正确的不为0的预警数量");
                     return;
                 }
    
                 $.ajax({ 
                     url: "StockManger/inform",
                     type: "POST",
                     data: $('#formEdit').serialize(),
                     dataType: "json",
                     success: function (data) { 
                         if (data.success == "true") { 
                             layer.closeAll();
                             layer.msg(data.msg);
                             $("#search").click();
                         } else { 
                             layer.msg(data.msg);
                         }
                     }
                 });
    
             }
     });

### layui模块规范 ###

> layui 的模块是基于 layui.js 内部实现的异步模块加载方式，它并不遵循于AMD（没有为什么，毕竟任性呀！），而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。

*  预先加载。即一个JS文件中，写一个use即可。

layui.use(['layer','form', 'layedit', 'laydate', 'test', 'autocomplete'], function(){ 
        var form = layui.form() //获取form模块
            ,layer = layui.layer //获得layer模块
            ,layedit = layui.layedit
            ,laydate = layui.laydate //获得laydate模块
            ,test= layui.test
            ,autocomplete = layui.autocomplete
            ,jstree = layui.jstree;
        test.restVal();
        test.selectMove();
        test.formToggle({ 
            ifTableResize: true
        });
        $("#clear").click(function() { 
        	 	$('#orderNo').val('')
            $('#queryName').val('')
            $('#queryPhone').val('')
            $('#orderStatus').val('')
        })
    
    });

### layui.laydate ###

### layui结合下拉框 ###

## 联想查询,自动补全 ##

//联想查询-选中后会改变当前框value
    $('#text1').typeahead({ 
     source: function (query, process) { 
           $.post('cainiaoSite/queryAllCusite', { chars: query}, function (data) { 
           	for(i in data) { 
           		data[i].name = data[i].id + " - " + data[i].name
           	}
               process(data);
           });
       },
       afterSelect:function(item) { 
       	var w=item.name.indexOf("-");
       	$("#text1").val($.trim(item.name.substring(w+1)));
       	$("#cusite").val($.trim(item.name.substring(w+1)));
              $("#cuscode").val($.trim(item.id));
          }
    });

[layui]: http://www.layui.com/
[layui 1]: http://www.layui.com/doc/
[Link 1]: http://www.layui.com/doc/modules/layer.html#shade
[70]: /images/20220524/964852ba9e9948bbba9d8cfc52852cdc.png
[70 1]: /images/20220524/916b19f31a834b198a4a2a48d86f5848.png
[layer.open]: http://www.layui.com/doc/modules/layer.html