layui常用方法-Layui教程-PHP中文網

首頁

web前端

Layui教程

layui常用方法

尚

Nov 16, 2019 pm 05:41 PM

layui

layui(諧音:類UI) 是一款採用自身模組規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。

layui常用方法

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(&#39;radio(term)&#39;, 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(&#39;layer&#39;, function() {
                 layer.alert(returndata.msg, {
                        skin: &#39;layui-layer-lan&#39;
                        ,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,&#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 === &#39;setSign&#39;){
        layer.prompt({
            formType: 2
            ,title: &#39;修改 ID 为 [&#39;+ data.id +&#39;] 的角色页面&#39;
            ,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>

登入後複製

#表單取得Value資料：

function formLoad(element,data){
   var input = document.getElementById(element).getElementsByTagName(&#39;input&#39;);
   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(&#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:[&#39;添加新书信息&#39;,&#39;font-size:22px&#39;],
              area: [&#39;400px&#39;, &#39;420px&#39;],
              content: &#39;../jsp/addbook.jsp&#39;,
              cancel: function(index, layero){ 
                  layer.confirm(&#39;是否关闭?&#39;, {icon: 3, title:&#39;提示&#39;}, function(index){
                      layer.close(index);
                      table.reload("booktable");
                    });
                }   
            });
      });

登入後複製

更多layui相關知識請追蹤layui框架。

以上是layui常用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7821

Java教學

1647

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟：新增跳轉代碼：在登入表單提交按鈕點選事件中新增判斷，成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置：在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段，name 為 "redirect"，value 為目標頁面位址。

layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法，包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數，以及監聽表單提交事件獲取資料。

layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui與Vue的差異主要體現在功能和關注點上。 layui專注於快速開發UI元素，提供預製元件簡化頁面建置；而Vue則是全端框架，注重資料綁定、元件化開發和狀態管理，更適合建構複雜應用程式。 layui學習簡單，適合快速建立頁面；Vue學習曲線陡峭，但有助於建立可擴展且易於維護的應用程式。根據專案需求和開發者技能水平，可以選擇合適的框架。

layui如何實現自適應 Apr 26, 2024 am 03:00 AM

透過使用layui框架的響應式佈局功能，可以實現自適應佈局。步驟包括：引用layui框架。定義自適應佈局容器，設定layui-container類別。使用響應式斷點（xs/sm/md/lg）隱藏特定斷點下的元素。利用網格系統（layui-col-）指定元素寬度。透過偏移量（layui-offset-）建立間距。使用響應式實用工具（layui-invisible/show/block/inline）控制元素的可見性和顯示方式。

layui怎麼傳數據 Apr 26, 2024 am 03:39 AM

使用 layui 傳輸資料的方法如下：使用 Ajax：建立請求對象，設定請求參數（URL、方法、資料），處理回應。使用內建方法：使用 $.post、$.get、$.postJSON 或 $.getJSON 等內建方法簡化資料傳輸。

layui是什麼意思啊 Apr 04, 2024 am 04:33 AM

layui是一個前端UI框架，它提供了豐富的UI元件、工具和功能，幫助開發人員快速建立現代化、響應式和互動式Web應用程序，特點包括：靈活輕量、模組化設計、豐富的元件、強大的工具和易於自訂。它廣泛應用於各種Web應用程式的開發中，包括管理系統、電商平台、內容管理系統、社交網路和行動裝置應用程式。

layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是一款基於JavaScript的前端框架，提供了一套易用的UI元件和工具，幫助開發者快速建立響應式網路應用程式。其特點包括：模組化、輕量級、響應式，並擁有完善的文件和社群支援。 layui廣泛應用於管理後台系統、電商網站和行動裝置應用程式等開發。優點在於上手快、提升效率、維護方便，缺點是客製化較差、技術更新較慢。

layui框架和vue框架的區別 Apr 26, 2024 am 01:27 AM

layui和vue是前端框架，layui是一種輕量級的函式庫，提供UI元件和工具；vue是一個全面的框架，提供UI元件、狀態管理、資料綁定和路由等功能。 layui基於模組化的架構，vue是基於組件化的架構。 layui擁有較小的生態系統，vue擁有龐大且活躍的生態系統。 layui學習曲線較低，vue學習曲線較陡。 layui適用於小型專案和快速開發UI元件，vue適用於大型專案和需要豐富功能的場景。

See all articles

layui常用方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題