精华内容
下载资源
问答
  • layer.open和layui.confirm用法
    千次阅读
    2019-09-10 10:39:45

     1  :layer.open 根据type不同,类型也就不一样,有五种类型:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)

    页面层(type:1) :弹出层展示的是某个定义好的页面元素

    iframe层(type:2) :弹出层直接调用其他地方的页面

    2

    layui.confirm就是确定或者取消的事件

     

     

    更多相关内容
  • 使用H-UI框架中的layer弹出层时发现 layer.js中没有layer.prompt,如果想要使用layer.prompt可以使用layer中的use从扩展中加载此扩展方法 代码如下: layer.use('extend/layer.ext.js', function(){ layer.ext = ...
  • layui layer.open()中的select,radio不显示.zip
  • layer.css web弹层组件

    2019-07-06 12:56:27
    layer是一款口碑极佳的web弹层组件,layer 基于,需要layer.js
  • 主要介绍了解决jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题,需要的朋友可以参考下
  • 今天小编就为大家分享一篇layer ui插件显示tips时,修改字体颜色的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val());...var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(index); //父类方法

    //调用父类方法

    window.parent.exportData($('#shownum').val(),$('#splitstr').val());

    //关闭iframe页面
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    parent.layer.close(index);

    //父类方法

    function exportData(shownum,splitstr){

    //TODO

    }

    展开全文
  • Layer UI基础使用

    千次阅读 2018-04-03 16:37:19
    1、加载页面时马上加载数据:layui.use('layer', function() { var $ = layui.jquery, layer = layui.layerlayer.ready(function() { layer.msg(...
    1、加载页面时马上加载数据:
    layui.use('layer', function() {
                        var $ = layui.jquery,
                            layer = layui.layer;
                    layer.ready(function() {
                        layer.msg('很高兴一开场就见到你');
                    });
                    });
    ready:进行Ajax请求,获取数据
    2、数据渲染
    <body>
            <div id="view"></div>
        </body>
    //自定义渲染模板
        <script id="demo" type="text/html">
            <h1>{{ d.title }}</h1>
            <ul>
                {{# for(var i = 0, len = d.list.length; i
                < len; i++){ }} <li>
                    <span>姓名:{{ d.list[i].name }}</span>
                    <span>城市:{{ d.list[i].city }}</span>
                    </li>
                    {{# } }}
            </ul>
        </script>
    //渲染数据
    <script>
            //第三步:渲染模版 
            var data = {
                title: '前端攻城师',
                list: [{
                    name: '贤心',
                    city: '杭州'
                }, {
                    name: '谢亮',
                    city: '北京'
                }, {
                    name: '浅浅',
                    city: '杭州'
                }, {
                    name: 'Dem',
                    city: '北京'
                }]
            };
            var gettpl = document.getElementById('demo').innerHTML;
            laytpl(gettpl).render(data, function(html) {
                document.getElementById('view').innerHTML = html;
            });
        </script>
    2. 子页面操作:
    1、访问父页面元素值
    var  parentId=parent.$( "#id" ).val(); //访问父页面元素值  

    2、访问父页面方法
    1. var parentMethodValue=parent.getMethodValue();//访问父页面方法  

    3、如何关闭弹出的子页面窗口
    1. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
    2. parent.layer.close(index);//关闭弹出的子页面窗口  

    4、如何从子页面执行刷新父页面操作
    1. parent.location.reload(); // 父页面刷新 

    5.传值
    $('#sayHello').click(function () {  
            top.layer.open({  
                id: "layer_say_hello",  
                type: 2,  
                title: '打招呼',  
                shadeClose: true,  
                shade: 0.8,  
                area: ['500px', '400px'],  
                content: '/Findfriend/Part_SayHello', //iframe的url  
                success: function (layero, index) {  
                    var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素  
                    var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素  
                    // layero.find("iframe")        找到iframe的jquery对象  
                    // layero.find("iframe")[0]     将jqeruy对象转化为Dom对象  
                    // contentWindow                获取当前 iframe 的 内容 window对象(Dom对象)  
                    //.send-hello 是 LayerFrame 的元素  
                    var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);  
                    jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);  
                    jquerySendHelloButton.attr("data-her-nick-name", her_nickname);  
                }  
            });  
        })  
    展开全文
  • https://layer.layui.com https://www.layui.com/demo/form.html https://www.layui.com/admin/std/dist/views DEMO <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">...

     

     

    几个常用的帮助文档地址

    https://layer.layui.com
    https://www.layui.com/demo/form.html
    https://www.layui.com/admin/std/dist/views

     DEMO

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>LayerUI</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
        <script>
            layer.alert("只想简单的提示", {resize: false});
        </script>
    </head>
    <body>
    
    </body>
    </html>

      

    弹窗提示 

    layer.alert("只想简单的提示", {resize: false});
    layer.alert("只想简单的提示", {resize: false});
    layer.alert("改了标题、改了按钮文字、加了图标、确认按钮水平居中", {resize: false, title: "提示", btn: ["知道了"], btnAlign: "c", icon: 0}, index => {
        layer.close(index);
    });
    layer.confirm("纳尼?", {
        resize: false, btn: ["按钮一", "按钮二", "按钮三"] /*可以无限个按钮*/, btn3: (index, layero) => {
            layer.close(index);/*按钮【按钮三】的回调*/
        }
    }, (index, layero) => {
        layer.close(index);/*按钮【按钮一】的回调*/
    }, index => {/*按钮【按钮二】的回调*/
    });

      

    确认窗口

    layer.confirm("确定执行该操作吗?", {resize: false, title: "提示", btn: ["确定", "取消"], btnAlign: "c", icon: 3, shadeClose: true}, index => {
        layer.close(index);
        layer.msg("您点了确定");
    }, () => {
        layer.msg("您点了取消");
    });
    
    layer.confirm("纳尼?", {
        resize: false, btn: ["按钮一", "按钮二", "按钮三"] /*可以无限个按钮*/, btn3: (index, layero) => {/*按钮【按钮三】的回调*/
        }
    }, (index, layero) => {/*按钮【按钮一】的回调*/
    }, index => {/*按钮【按钮二】的回调*/
    });

    弹窗中打开别人的网页 

    layer.open({content: "https://www.tencent.com/video/video20.mp4", area: ["800px", "450px"], type: 2, title: false, shadeClose: true});

    弹出相册 

    layer.photos({
        photos: {
            "data": [
                {"alt": "图片名1", "src": "https://www.baidu.com/img/flexible/logo/pc/result.png"},
                {"alt": "图片名2", "src": "https://www.baidu.com/img/flexible/logo/pc/result.png"}
            ]
        }
    });
    
    
    //动态获取数据库里面的图片
    
    $.getJSON("http://shuzhiqiang.com/xxx/api/img.json", data => {
        layer.photos({
            photos: data, anim: 5, tab: (pic, index) => {
                console.log(pic, index);
                /*切换图片时触发回调函数获取当前图片的一些信息和弹窗索引*/
            }
        });
    });
    /* img.json文件格式: 
    {
     "data": [ 
        { "alt": "图片名1", "src": "img/photo/1.jpg" }, 
        { "alt": "图片名2", "src": "img/photo/2.jpg" } 
        ] 
    }*/

    缩略图列表点击后弹出相册

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>LayerUI</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    </head>
    <body>
    HTML示例
    <div id="layer-photos-demo" class="layer-photos-demo">
        <img layer-pid="图片id,可以不写"
             layer-src="https://shuzhiqiang.com/main/images/files/parallax-bg/img-1.jpg"
             src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片名"
        >
        <img layer-pid="图片id,可以不写"
             layer-src="https://shuzhiqiang.com/main/images/files/parallax-bg/img-1.jpg"
             src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="图片名"
        >
    </div>
    <script>
        layer.photos({
            photos: "#layer-photos-demo", anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
        });
    </script>
    </body>
    </html>
    展开全文
  • layer.open关闭弹窗,刷新表格

    千次阅读 2019-05-25 14:03:28
    var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 关闭弹窗,刷新表格 layer.open({ type: 2, title: '添加活动', area: [width, height], content: '{:...
  • //基于layer框架之上,验证表单时引用。弹出提示错误 function qxMsg(msgStr) { layer.open({ type: 1, title: '提示消息', offset: '10%;', content: '<div xss=removed>'+msgStr+'</div>', btn: '关闭', ...
  • layUI中的layer.open()方法

    千次阅读 2020-04-09 12:38:00
    去这里看详细实例:https://layer.layui.com/
  • *** 实现目标:就是在ajax提交中,还没返回结果的时候,给一个遮罩层,有一个 '正在处理' 的效果! layer.load(2, { shade: [0.5, '#000'], content: '正在处理, 请稍后...', ... layero.find('.layui-layer-c...
  • layui监听弹框layer.open的按钮

    千次阅读 2020-11-26 09:25:07
    layui监听弹框layer.open的按钮 layui.use(['element','layer'],function(){ var element = layui.element ,layer = layui.layer; $("#tuijian").click(function(){ layer.open({ title: '推荐选择' ,content:...
  • (需要注意的是,layer.js的引入,从官网下载了layer.js,保存到本地,然后从文件中引入 - 注意修改代码中引入layer.js的路径(line 10))  layer官网: http://layer.layui.com/ layer.js下载地址: ...
  • layer官网:layer.layui.com

    千次阅读 2018-02-06 10:54:00
    layer官网:layer.layui.com
  • layer.load()也一样出不来。 原因就是ajax的async设置为true时,ajax会委托浏览器另起一个线程,此线程与js线程和ui线程不冲突,只是在执行完成后再插入js事件环。而ajax的async设置为false时并没有启动单独的线程...
  • 突然发现在使用LayUI时,用到弹出层layer.prompt时,如果文本框输入值是空的话点击确定没有反应,不能向下执行 但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做??
  • layui的layer.confirm获取按钮焦点

    千次阅读 2019-08-28 17:00:23
    因为ayer.confirm的按钮并非采用button,而是a标签,所以获取按钮焦点获取不到,要采用...layer.confirm('确定取消这个弹窗吗?',{ btn: ['确定', '取消'], success:function(layero){ //获取焦点 var btn = l...
  • Layui之layer.confirm询问框,是否删除

    千次阅读 2019-10-31 18:05:23
    由于 layer 在 layui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块,由于其用户基数较大,所以至今仍把它作为独立组件来维护。 一个是否删除...
  • 今天小编就为大家分享一篇解决layer弹出层自适应页面大小的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layer.load()不及时显示

    千次阅读 2020-05-29 17:05:21
    今天在登录WEB系统时,...所以本宝本着用户体验为第一原则,加入了layer.load(); function lodingUtil(t) { if (t) {//如果是true则显示loading //loding状态 loading = layer.load(2, { //icon支持传入0-2 shade
  • layer.prompt无效的解决办法

    千次阅读 2017-12-25 15:27:54
    使用H-UI框架中的layer弹出层时发现 layer.js中没有layer.prompt,如果想要使用layer.prompt可以使用layer中的use从扩展中加载此扩展方法 代码如下: layer.use('extend/layer.ext.js', function(){ layer.ext ...
  • var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index);
  • 今天在开发中遇到 炎黄平台点击【办理...究其原因,是因为layer.confirm是异步UI,编译器自动先执行其后的代码去了。 下面代码可以将异步改成同步UI layer.confirm('是否执行下一步?', { btn: ['是', '否'], ...
  • Layui 内置方法 - layer.tips(tips层 )

    万次阅读 2019-04-22 11:01:31
    layer.tips('只想提示地精准些', '#id'); //eg 2 $('#id').on('click', function(){ var that = this; layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予thi...
  • 使用layer作为后台CRUD UI体系的时候,大多数 添加/编辑 功能我是使用了layer.open来打开一个模态页面框。该方案在高分辨率的时候十分友好,但是在低分辨率特别是笔记本上显示效果堪忧,建议全面。 所以我们的解决...
  • layer-ui loading效果几种方式

    千次阅读 2019-07-11 11:16:39
    //1、layer.msg layer.msg('加载中', { icon: 16 , shade: 0.01 }); // 2、灰色弹出蒙版显示加载中 var loading = layer.load('加载中...', { shade: [0.3,'#fff'] //0.1透明度的白色背景 }); setTimeout...
  • Layer UI 模块化的用法

    千次阅读 2018-03-09 21:58:32
    此文章适合入门的同学查看,之前因为项目的原因,在网上找了一套Layer UI做的后台管理系统模板,完全不懂LayUI里面的JS用法,看了官方文档和其它资料后才明白怎么去实现模块化这个例子,但是还是感觉网上的资料写得...
  • function demo() { layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, function(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);//...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,923
精华内容 21,169
关键字:

layer.ui