要點:
字符串被渲染為彈窗層之后,回自動轉換為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>
