hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

【WEB前端开辟】layui经常使用要领

2019-11-17前端开发搜奇网54°c
A+ A-
layui(谐音:类UI) 是一款采纳本身模块范例编写的前端 UI 框架,遵照原生 HTML/CSS/JS 的誊写与组织形式,门坎极低,拿来即用。

layui经常使用的要领:

layui中的input radio单选框监听挑选触发事宜:

依据给input绑定的 lay-filter 举行查找input,然后进入函数推断

<div class="layui-form-item">
            <label class="layui-form-label">历久短时候</label>
            <div class="layui-input-block">
                <input type="radio" name="term" value="历久" title="历久有用"
                    lay-filter="term"> <input type="radio" name="term"
                    value="短时候" title="短时候有用" lay-filter="term">
            </div>
        </div>

        <div id="termtime" class="layui-hide">
            <div id="classdate" class="layui-form-item" style="">
                <label class="layui-form-label">最先时候:</label>
                <div class="layui-input-block">
                    <input type="text" name="startdate" id="startdate"
                        lay-verify="startdate" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">完毕时候:</label>
                <div class="layui-input-block">
                    <input type="text" name="enddate" id="enddate"
                        lay-verify="enddate" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
form.on('radio(term)', function(data) {

            if (data.value == "短时候") {
                $("#termtime").removeClass("layui-hide");
            } else if (data.value == "历久") {
                $("#termtime").addClass("layui-hide");
            }
        });

设置按钮依据状况前提显现差别的按钮:

<script type="text/html" id="toolbtn">

{{#  if(d.state == true){}}
           <a  class="layui-btn layui-btn-mini layui-btn-danger" lay-event="down">下线</a>
      {{#  } else { }}
         <a class="layui-btn layui-btn-mini " lay-event="up">宣布</a>
  {{#  } }}
</script>

种种弹窗:

注:由于有的模块中已声明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只能输入数字,不能输入其他和小数点

<input type="text" id="num" name="num" placeholder="请输入" 
autocomplete="off" class="layui-input"  onkeyup="this.value=this.value.replace(/\D/g,'')" 
onafterpaste="this.value=this.value.replace(/\D/g,'')">

layui遮罩层,上传最先,胜利后封闭遮罩层

<script type="text/javascript">

function  tanchu(){
    layui.use('layer', function(){
          var layer = layui.layer;
          
          var index = layer.load(1, {
              shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
        }); 
}
function  tanchuclose(){
    layui.use('layer', function(){
          var layer = layui.layer;
          
          layer.close(layer.index);
        }); 
}
</script>
<script type="text/javascript">
        function upload(){
             tanchu();
             var formData = new FormData($( "#uploadForm" )[0]);  
             $.ajax({  
                  url: '<%=basePath%>/knowledge/upload' ,  
                  type: 'POST',  
                  data: formData,  
                  async: false,  
                  cache: false,  
                  contentType: false,  
                  processData: false,  
                  success: function (returndata) { 
                     
          
                      tanchuclose();
                      alert(returndata);
                  },  
                  error: function (returndata) {  
                      alert(returndata);  
                  }  
             });  
        }
        
        
    </script>

点击修正:

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
            });
          });
        }

格式化日期到时分秒:

<script type="text/html" id="timeTpl">
{{#  var fn = function(){
var date=new Date(d.uptime);
var d1=date.getDate();
var y=date.getFullYear();
var m=date.getMonth() + 1;
var HH=date.getHours();
var mm=date.getMinutes();  
var ss=date.getSeconds(); 
  return y+'/'+m+'/'+d1+'  '+HH+':'+mm+':'+ss;
}; if(true){ }}
 {{ fn() }}
{{#  } }}
</script>

格式化时候日期:

<script type="text/html" id="timeTpl">
{{#  var fn = function(){
var date=new Date(d.createtime);
var d1=date.getDate();
var y=date.getFullYear();
var m=date.getMonth() + 1;
  return y+'/'+m+'/'+d1;
}; if(true){ }}
 {{ fn() }}
{{#  } }}
</script>

暗码显现 ***** :

<script type="text/html" id="pwd">
 {{#  var fn = function(){
  return '***';
}; if(true){ }}
 {{ fn() }}
{{#  } }}   
</script>

状况栏:

<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-mini" id="edit" lay-event="edit">保留</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">凝结</a>
</script>
<script type="text/html" id="usernameTpl">
  <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
</script>

长途猎取数据:

<script type="text/javascript">

        layui.use('form', function() {
            var form = layui.form;
            $("#tname").children().remove();
            $.ajax({
                type : "post",
                url : "../user/selectallusersrole.do?role=3",
                dataType : "json",
                sync : "false",
                success : function(data) {
                    for (var a = 0; a < data.data.length; a++) {
                        $("#tname").append(
                                "<option class='tname' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
                    }
                    form.render('select'); //用ajax追加的须要如许衬着一下
                    
                },
                error : function() {
                }
            })
            
            $("#urealname").children().remove();
            $.ajax({
                type : "post",
                url : "../user/selectallusersrole.do?role=4",
                dataType : "json",
                sync : "false",
                success : function(data) {
                    for (var a = 0; a < data.data.length; a++) {
                        $("#urealname").append(
                                "<option class='name' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
                    }
                    form.render('select'); //用ajax追加的须要如许衬着一下
                    
                },
                error : function() {
                }
            })
            $("#cname").children().remove();
            $.ajax({
                type : "post",
                url : "../class/selectclass.do",
                dataType : "json",
                sync : "false",
                success : function(data) {
                    for (var a = 0; a < data.data.length; a++) {
                        $("#cname").append(
                                "<option class='tname' value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>")
                    }
                    form.render('select'); //用ajax追加的须要如许衬着一下
                    
                },
                error : function() {
                }
            })
            
            //form.on('select(username)', function(data) {//给隐蔽的input赋值(机构id)
                //$("#yincang").val(data.value);
            //});
            
        });
    </script>

表单猎取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];
         }    
      }    
   }
  }

这是搜刮按钮,点击触发重载:

<div class="demoTable">
                        搜刮角色:
                        <div class="layui-inline">
                            <input class="layui-input" name="name" id="demoReload"
                                autocomplete="off">
                        </div>
                        <button class="layui-btn" style="transform: translateY(-10px);"
                            data-type="reload">搜刮</button>
                    </div>

这是重载事宜:

不须要指定重载的url,只须要依据表格的ID就能够重载,这里的ID是在layui声明的的ID,不是一般的标签中id="idno"如许的id,然后再where内里传参数

<script>
layui.use('table', function(){
  var table = layui.table;
  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');
      
      //实行重载
      table.reload('idTest', {
        page: {
          curr: 1 //从新从第 1 页最先
        },
        where: {
          name:  demoReload.val() 
        }
      });
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>

增加或修正翻开一个页面后,封闭页面重载本来页面数据表格

$("#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相干学问请关注layui框架。

以上就是layui经常使用要领的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【WEB前端开辟】layui经常使用要领

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

本文来源:搜奇网

本文地址:https://www.sou7.cn/281745.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>