layui彈出層處理(獲取、操作彈出層數據等)


 

要點:

字符串被渲染為彈窗層之后,回自動轉換為DOM,可以使用jq進行各種操作

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>開始使用layui</title>
        <link rel="stylesheet" href="/css/layui.css">
    </head>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

    
<!--     * 從官網下載的layui包中解壓后內容如下
     * ├─css //css目錄
      │  │─modules //模塊css目錄(一般如果模塊相對較大,我們會單獨提取,比如下面三個:)
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心樣式文件
      ├─font  //字體圖標目錄
      ├─images //圖片資源目錄(目前只有layim和編輯器用到的GIF表情)
      │─lay //模塊核心目錄
      │  └─modules //各模塊組件
      │─layui.js //基礎核心庫
      └─layui.all.js //包含layui.js和所有模塊的合並文件
      
      * 這里要十分注意的是,我們測試的代碼中引入layui的js要引入 layui.all.js,否則某些功能會無效-->
      


    <body>
        <!-- 你的HTML代碼 -->
        <div>
            aa
        </div>
        <button id="start" data-method="setTop" class="layui-btn">顯示彈出層</button>

    <script>
    

         $(function(){
             
             //打開彈窗
             $("#start").on("click",function(){
                f1();
            });
             
             //添加文件名稱按鈕
             $(document).on("click", "#add", function () {
                 var name = $("#doc_name").val();
                 if(!name){
                     alert("請輸入正確文件名稱!");
                     return;
                 }
                 
                 var s = `
                     <div class="remove">
                        <span class="names">${name}</span>
                        <button class="layui-btn">移除</button>
                    </div>
                `;
                $("#name_list").append(s);
                $("#doc_name").val("");
            
            });
             
             //移除當前文件名
             $(document).on("click", ".remove", function () {
                $(this).remove();
            });
             
             
        });
             
    
        function f1(){
            
            //彈出層內容
            var s = `
                <div id="layer1" >
                        <div class="layui-input-inline">
                            <label class="layui-form-label">文件名:</label>
                              <input id="doc_name" type="text" lay-verify="required" placeholder="請輸入" autocomplete="off" class="layui-input">
                              <button class="layui-btn" id="add">添加</button>
                        </div>
                    <label class="layui-form-label">待入庫文件:</label>
                    <div id="name_list" class="layui-inline">
                        
                    </div>
                </div>
            `;
            
            //打開彈出層
            layer.open({
              type: 1,
              skin: 'layer-cover', 
              area: ['900px', '470px'],
              anim: 5,
              title: "xx文件入庫",
              content: s,
              btn: ['入庫'],
              yes: function(){
                //執行入庫方法
                var arr = [];
                $(".names").each(function(i){
                   var name = $(this).text();
                   arr.push(name);
                })
                alert(arr);
             },
              btnAlign: 'c',
              shadeClose:'true',
              end: function(index, layero){
                  
              }
            });
            
        }
    
    
    
    </script>

</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM