• 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>
  • 相关阅读:
    更新主窗口控件的内容1:子线程工作时同时更新主线程内的控件内容
    静态类和非静态类中静态变量
    js $的扩展写法
    js 获取时区
    export to excel
    使用Sqlserver事务发布实现数据同步(zhuanqian)
    json to entity in api
    automapper demo
    autoMapper的介绍
    Springboot的热部署
  • 原文地址:https://www.cnblogs.com/libin6505/p/10870166.html
Copyright © 2020-2023  润新知