layui常用方法有哪些

这篇文章主要介绍layui常用方法有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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

layui常用的方法：

layui中的input radio单选框监听选择触发事件：

根据给input绑定的 lay-filter 进行查找input，然后进入函数判断

            长期短期            
                             
        
        
            
                开始时间：                
                                    
                结束时间：                
                                    
            
        

form.on('radio(term)', function(data) {            if (data.value == "短期") {                $("#termtime").removeClass("layui-hide");            } else if (data.value == "长期") {                $("#termtime").addClass("layui-hide");            }        });

设置按钮根据状态条件显示不同的按钮：

各种弹窗：

注：因为有的模块中已经声明layer有的则没有，所以这里都用layui.layer的方式来调用layer弹出层：

半透明黑色背景提示框，666毫秒自动关闭：

layui.layer.msg(returndata.msg,{time: 666});

蓝色模块，左边跳出动画，有确定按钮

layui.use('layer', function() {                 layer.alert(returndata.msg, {                        skin: 'layui-layer-lan'                        ,closeBtn: 0                        ,anim: 4 //动画类型                      });                });

input只能输入数字，不能输入其他和小数点

layui遮罩层，上传开始，成功后关闭遮罩层

点击修改：

if(obj.event === 'setSign'){        layer.prompt({            formType: 2            ,title: '修改 ID 为 ['+ data.id +'] 的角色页面'            ,value: data.homePage          }, function(value, index){            layer.close(index);                        $.ajax({                type:"post",                url:"<%=basePath%>/sys/role/update",                data:{role:JSON.stringify(data)},                dataType:"text",//返回的                success:function(data1) {                    layer.alert(data1.result);                    table.reload('idTest', {                        //url: '../user/selectmsguser.do'                        url: '<%=basePath%>/sys/role/list1?q=1'                        ,where: {}                         //,height: 300                      });                },                error:function(msg) {                    cosole.log(msg);                }            });             obj.update({              sign: value            });          });        }

格式化日期到时分秒：

格式化时间日期：

密码显示 ***** ：

状态栏：

远程获取数据：

表单获取Value数据：

function formLoad(element,data){   var input = document.getElementById(element).getElementsByTagName('input');   for(var i =0;i < input.length;i++){   var inputname = input[i].name;      for(var j in data){         if(inputname == j){         input[i].value = data[j];         }          }       }  }

这是搜索按钮，点击触发重载：

                        搜索角色：                        
                                                    
                        搜索                    

这是重载事件：

不需要指定重载的url，只需要根据表格的ID就可以重载，这里的ID是在layui声明的的ID，不是普通的标签中id="idno"这样的id，然后再where里面传参数

添加或修改打开一个页面后，关闭页面重载原来页面数据表格

$("#addBookbtn").click(function(){          layer.open({              type: 2,              title:['添加新书信息','font-size:22px'],              area: ['400px', '420px'],              content: '../jsp/addbook.jsp',              cancel: function(index, layero){                   layer.confirm('是否关闭?', {icon: 3, title:'提示'}, function(index){                      layer.close(index);                      table.reload("booktable");                    });                }               });      });

以上是"layui常用方法有哪些"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！