Laui의 일반적인 방법

layui(동음어: UI 유사)는 자체 모듈 사양으로 작성된 프런트 엔드 UI 프레임워크로, 기본 HTML/CSS/JS의 작성 및 구성 형식을 따르며 임계값이 매우 낮습니다.

layui에서 일반적으로 사용되는 방법:

layui의 입력 라디오 버튼은 선택 트리거 이벤트를 모니터링합니다.

입력에 바인딩된 레이 필터에 따라 입력을 찾은 다음 함수 판단을 입력합니다.

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

다양한 팝업:

참고: 일부 모듈은 이미 레이어를 선언했지만 일부 모듈은 레이어를 선언하지 않았기 때문에 여기서는layui.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 type="text" id="num" name="num" placeholder="请输入" 
autocomplete="off" class="layui-input"  onkeyup="this.value=this.value.replace(/\D/g,&#39;&#39;)" 
onafterpaste="this.value=this.value.replace(/\D/g,&#39;&#39;)">

layui 마스크 레이어, 업로드 시작, 성공 후 마스크 레이어 닫기

<script type="text/javascript">

function  tanchu(){
    layui.use(&#39;layer&#39;, function(){
          var layer = layui.layer;
          
          var index = layer.load(1, {
              shade: [0.1,&#39;#fff&#39;] //0.1透明度的白色背景
            });
        }); 
}
function  tanchuclose(){
    layui.use(&#39;layer&#39;, 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: &#39;<%=basePath%>/knowledge/upload&#39; ,  
                  type: &#39;POST&#39;,  
                  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(&#39;idTest&#39;, {
                        //url: &#39;../user/selectmsguser.do&#39;
                        url: &#39;<%=basePath%>/sys/role/list1?q=1&#39;
                        ,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+&#39;/&#39;+m+&#39;/&#39;+d1+&#39;  &#39;+HH+&#39;:&#39;+mm+&#39;:&#39;+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+&#39;/&#39;+m+&#39;/&#39;+d1;
}; if(true){ }}
 {{ fn() }}
{{#  } }}
</script>

비밀번호 표시*****:

<script type="text/html" id="pwd">
 {{#  var fn = function(){
  return &#39;***&#39;;
}; 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(&#39;form&#39;, 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=&#39;tname&#39; value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
                    }
                    form.render(&#39;select&#39;); //用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=&#39;name&#39; value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
                    }
                    form.render(&#39;select&#39;); //用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=&#39;tname&#39; value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>")
                    }
                    form.render(&#39;select&#39;); //用ajax追加的需要这样渲染一下
                    
                },
                error : function() {
                }
            })
            
            //form.on(&#39;select(username)&#39;, function(data) {//给隐藏的input赋值（机构id）
                //$("#yincang").val(data.value);
            //});
            
        });
    </script>

값 데이터 형식 획득:

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는 "idno"와 같은 일반 태그 ID가 아닌 Layui에 선언된 ID입니다. 그런 다음 where

<script>
layui.use(&#39;table&#39;, function(){
  var table = layui.table;
  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $(&#39;#demoReload&#39;);
      
      //执行重载
      table.reload(&#39;idTest&#39;, {
        page: {
          curr: 1 //重新从第 1 页开始
        },
        where: {
          name:  demoReload.val() 
        }
      });
    }
  };
  
  $(&#39;.demoTable .layui-btn&#39;).on(&#39;click&#39;, function(){
    var type = $(this).data(&#39;type&#39;);
    active[type] ? active[type].call(this) : &#39;&#39;;
  });
});
</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 프레임워크에 주목하세요.

위 내용은 Laui의 일반적인 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!