精华内容
下载资源
问答
我要提问
  • 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就是确定或者取消的事件

     

     

    更多相关内容

  • 解决layer.prompt无效的问题

     2020-12-13 13:11:58
    使用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

     2021-01-06 20:49:20
    layui layer.open()中的select,radio不显示.zip
    收起
    layui

  • layer.css web弹层组件

     2019-07-06 12:56:27
    layer是一款口碑极佳的web弹层组件,layer 基于,需要layer.js
    收起

  • jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

     2020-10-17 00:36:26
    主要介绍了解决jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题,需要的朋友可以参考下
    收起

  • layer ui插件显示tips时,修改字体颜色的实现方法

     2020-10-16 10:30:58
    今天小编就为大家分享一篇layer ui插件显示tips时,修改字体颜色的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • layer.open打开iframe页面的调用父页面方法及关闭

     千次阅读 2017-10-23 08:46:24
    //调用父类方法 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.layer; layer.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);  
                }  
            });  
        })  
    收起
    展开全文

  • 关于一个非常nice的原生UI框架——layerUI

     千次阅读 2021-08-23 20:32:08
    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>
    收起
    展开全文
    html javascript

  • 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实现表单完美验证的方法

     2020-12-13 09:49:41
    //基于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/
    收起

  • 用layer.load做一个ajax提交时候的遮罩层

     千次阅读 2020-02-08 17:04:04
    *** 实现目标：就是在ajax提交中，还没返回结果的时候，给一个遮罩层，有一个 '正在处理' 的效果！ layer.load(2, { shade: [0.5, '#000'], content: '正在处理, 请稍后...', ... layero.find('.layui-layer-c...
    收起
    遮罩层 loading LayUI

  • 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:...
    收起
    jquery

  • 鼠标悬浮事件 -jQuery hover（）方法（layer.js）（layer.tips）

     千次阅读 2019-09-11 11:17:36
    （需要注意的是，layer.js的引入，从官网下载了layer.js，保存到本地，然后从文件中引入 - 注意修改代码中引入layer.js的路径（line 10））  layer官网： http://layer.layui.com/ layer.js下载地址： ...
    收起
    hover layui

  • layer官网：layer.layui.com

     千次阅读 2018-02-06 10:54:00
    layer官网：layer.layui.com
    收起

  • Jquery ajax 同步阻塞引起的UI线程阻塞的坑（loading图片显示不出来，layer.load延迟）

     2020-12-30 06:33:56
    用layer.load()也一样出不来。 原因就是ajax的async设置为true时，ajax会委托浏览器另起一个线程，此线程与js线程和ui线程不冲突，只是在执行完成后再插入js事件环。而ajax的async设置为false时并没有启动单独的线程...
    收起

  • layui：弹层如何在layer.prompt输入值为空时点击确定继续执行逻辑？

     千次阅读 2019-06-14 16:18:36
    突然发现在使用LayUI时，用到弹出层layer.prompt时，如果文本框输入值是空的话点击确定没有反应,不能向下执行 但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做？？
    收起
    layui

  • 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弹出层自适应页面大小的问题

     2020-10-16 09:41:38
    今天小编就为大家分享一篇解决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
    收起
    jquery javascript

  • 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 ...
    收起

  • layer.open打开的子页面如何关闭父页面的弹出层

     千次阅读 2019-07-16 16:53:35
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index);
    收起
    前端

  • layui中layer.confirm异步执行，自动消失的问题【炎黄平台】

     千次阅读 2020-04-16 15:50:44
    今天在开发中遇到 炎黄平台点击【办理...究其原因，是因为layer.confirm是异步UI，编译器自动先执行其后的代码去了。 下面代码可以将异步改成同步UI layer.confirm('是否执行下一步？', { btn: ['是', '否'], ...
    收起
    javascript

  • 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...
    收起

  • layui之layer根据分辨率调整全屏(js判断分辨率)

     千次阅读 2020-07-29 23:35:27
    使用layer作为后台CRUD UI体系的时候，大多数 添加/编辑 功能我是使用了layer.open来打开一个模态页面框。该方案在高分辨率的时候十分友好，但是在低分辨率特别是笔记本上显示效果堪忧，建议全面。 所以我们的解决...
    收起
    js判断分辨率

  • 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用法，看了官方文档和其它资料后才明白怎么去实现模块化这个例子，但是还是感觉网上的资料写得...
    收起
    LayUI

  • layer关闭当前窗口页面以及确认取消按钮

     千次阅读 2019-01-10 11:44:51
    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