這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)layui框架的常用方法，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

公司主營業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出衢江免費做網(wǎng)站回饋大家。

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

layui常用的方法：

layui中的input radio單選框監(jiān)聽選擇觸發(fā)事件：

根據(jù)給input綁定的 lay-filter 進行查找input，然后進入函數(shù)判斷

            長期短期
            

                 
            
        

        

            

                開始時間：
                

                    
                
                結(jié)束時間：
                

                    
                
            
        

form.on('radio(term)', function(data) {

            if (data.value == "短期") {
                $("#termtime").removeClass("layui-hide");
            } else if (data.value == "長期") {
                $("#termtime").addClass("layui-hide");
            }
        });

設(shè)置按鈕根據(jù)狀態(tài)條件顯示不同的按鈕：

各種彈窗：

注：因為有的模塊中已經(jīng)聲明layer有的則沒有，所以這里都用layui.layer的方式來調(diào)用layer彈出層：

半透明黑色背景提示框，666毫秒自動關(guān)閉：

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

藍色模塊，左邊跳出動畫，有確定按鈕

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

input只能輸入數(shù)字，不能輸入其他和小數(shù)點

layui遮罩層，上傳開始，成功后關(guān)閉遮罩層

點擊修改：

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

格式化日期到時分秒：

格式化時間日期：

密碼顯示 ***** ：

狀態(tài)欄：

遠程獲取數(shù)據(jù)：

表單獲取Value數(shù)據(jù)：

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

這是搜索按鈕，點擊觸發(fā)重載：

                        搜索角色：
                        

                            
                        
                        搜索
                    

這是重載事件：

不需要指定重載的url，只需要根據(jù)表格的ID就可以重載，這里的ID是在layui聲明的的ID，不是普通的標簽中id="idno"這樣的id，然后再where里面?zhèn)鲄?shù)

添加或修改打開一個頁面后，關(guān)閉頁面重載原來頁面數(shù)據(jù)表格

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

上述就是小編為大家分享的layui框架的常用方法，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。