layer 订阅
layer是一款web弹层组件,致力于服务各个水平段的开发人员。 展开全文
layer是一款web弹层组件,致力于服务各个水平段的开发人员。
信息
案    例
八圆包
外文名
layer
作    者
贤心
中文名
layer
简    介
可以让你想到即可做到的web弹窗
layer弹出层组件
[1]  layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(前端开发工程师)。layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您的页面拥有更丰富与便捷的操作体验,而您只需在调用时简单地配置相关参数,即可轻松实现。与同类弹出层组件相比,layer的优势明显,她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升,在多层模式的回调处理中,具备其它多数层组件所没有的“独立不冲突”(截至到2013年10月23,已有115859人次关注新版layer)。您完全可以大可放心地在页面弹出任意数量的层,她们彼此不妨碍。当你问及她的兼容时,layer必须告诉你,她兼容了一切浏览器,包括古老的ie6。layer公开了如此多的接口(api),这使得您可以DIY太多您需要的风格,尤其是页面层模式,意味着必要时您可以完全抛弃layer的现有皮肤,并用你的思维去勾勒她的衣着。而问题在于,我必须中止“王婆卖瓜”的陈述。因为一切的不足或友好,都需要您在使用过程中去发现。据不完全统计,截至到2013年8月30号,layer已服务于6000多家web平台。layer作为layUI库的成员,将一直致力于为web开发提供动力。八圆包,该站所有页面都有用到layer。
收起全文
精华内容
下载资源
问答
  • layer

    千次阅读 2017-07-01 15:30:06
    layer-更懂你的web弹窗解决方案          function func1() {  layer.alert('内容');  }  function func2() {  layer.alert('内容', {  icon: 1,  
    <!doctype html>
    
    <html>


    <head>
        <meta charset="utf-8">
        <title>layer-更懂你的web弹窗解决方案</title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script src="layer/layer.js"></script>
        <script src="layer/extend/layer.ext.js"></script>
    </head>


    <body>
        <script>
        function func1() {
            layer.alert('内容');
        }


        function func2() {
            layer.alert('内容', {
                icon: 1,
                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
            });
        }


        function func3() {
            //询问框
            layer.confirm('您是如何看待前端开发?', {
                btn: ['重要','奇葩'] //按钮
            }, function(){
                layer.msg('的确很重要', {icon: 1});
            }, function(){
                layer.msg('也可以这样', {
                    time: 2000, //2s后自动关闭
                    btn: ['明白了', '知道了']
                });
            });
        }


        function func4() {
            //提示层
            layer.msg('玩命提示中');
        }


        function func5() {
            //墨绿深蓝风
            layer.alert('墨绿风格,点击确认看深蓝', {
                skin: 'layui-layer-molv' //样式类名
                ,closeBtn: 0
            }, function(){
                layer.alert('偶吧深蓝style', {
                    skin: 'layui-layer-lan'
                    ,closeBtn: 0
                    ,shift: 4 //动画类型
                });
            });
        }


        function func6() {
            //捕获页
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                content: $('.layer_notice'), //捕获的元素
                cancel: function(index){
                    layer.close(index);
                    this.content.show();
                    layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 2000, icon:6});
                }
            });
        }


        function func7() {
            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '240px'], //宽高
                content: 'html内容'
            });
        }


        function func8() {
            //自定页
            layer.open({
                type: 1,
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 0, //不显示关闭按钮
                shift: 2,
                area: ['420px', '240px'], //宽高
                shadeClose: true, //开启遮罩关闭
                content: '内容'
            });
        }


        function func9() {
            //tips层
            layer.tips('Hi,我是tips', $("#tips"));
        }


        function func10() {
            //iframe层
            layer.open({
                type: 2,
                title: 'layer mobile页',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '90%'],
                content: 'http://m.baidu.com' //iframe的url
            }); 
        }


        function func11() {
            //iframe窗
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0, //不显示关闭按钮
                shade: [0],
                area: ['340px', '215px'],
                offset: 'auto', //右下角弹出
                time: 2000, //2秒后自动关闭
                shift: 2,
                content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
                end: function(){ //此处用于演示
                    layer.open({
                        type: 2,
                        title: '百度一下,你就知道',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['1150px', '650px'],
                        content: 'http://www.baidu.com'
                    });
                }
            });
        }


        function func12() {
            //加载层
            var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
        }


        function func13() {
            //loading层
            var index = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
        }


        function func14() {
            //小tips
            layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {
                tips: [1, '#3595CC'],
                time: 4000
            });
        }


        function func15() {


            //prompt层
            layer.prompt({
                title: '输入任何口令,并确认',
                formType: 1 //prompt风格,支持0-2
            }, function(pass){
                layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text){
                    layer.msg('演示完毕!您的口令:'+ pass +' 您最后写下了:'+ text);
                });
            });
        }


        function func16() {
            //tab层
            layer.tab({
                area: ['600px', '300px'],
                tab: [{
                    title: 'TAB1', 
                    content: '内容1'
                }, {
                    title: 'TAB2', 
                    content: '内容2'
                }, {
                    title: 'TAB3', 
                    content: '内容3'
                }]
            });
        }




        function openpage() {
            layer.config({
                extend: 'extend/layer.ext.js'
            });  
            //页面一打开就执行,放入ready是为了layer所需配件(css、扩展模块)加载完毕
            layer.ready(function() {
                //官网欢迎页
                layer.open({
                    type: 2,
                    skin: 'layui-layer-lan',
                    title: 'layer弹层组件',
                    fix: false,
                    shadeClose: true,
                    maxmin: true,
                    area: ['1000px', '500px'],
                    content: 'https://www.baidu.com'
                });
                layer.msg('欢迎使用layer');
            }); 
        }
        </script>


        <div class="layer_notice">hello,i'm layer!</div>
        <button id="func1" οnclick="func1();">初体验</button>
        <button id="func2" οnclick="func2();">皮肤</button>
        <button id="func3" οnclick="func3();">询问框</button>
        <button id="func4" οnclick="func4();">提示层</button>
        <button id="func5" οnclick="func5();">蓝色风格</button>
        <button id="func6" οnclick="func6();">捕捉页</button>
        <button id="func7" οnclick="func7();">页面层</button>
        <button id="func8" οnclick="func8();">自定义</button>
        <button id="func9" οnclick="func9();">tips层</button>
        <button id="func10" οnclick="func10();">iframe层</button>
        <button id="func11" οnclick="func11();">iframe窗</button>
        <button id="func12" οnclick="func12();">加载层</button>
        <button id="func13" οnclick="func13();">loading层</button>
        <button id="func14" οnclick="func14();">小tips</button>
        <button id="func15" οnclick="func15();">prompt层</button>
        <button id="func16" οnclick="func16();">tab层</button>
        <button id="openpage" οnclick="openpage();">openpage</button>
        <button id="tips">tips</button>
        <button id="tips2">tips2</button>
    </body>


    </html>
    展开全文
  • 解决办法解压layer,修改入口调用 移除红色这块的代码即可,或者复制我下面代码直接替换 // 搜索该代码 e.layui && layui.define ? (r.ready(), layui.define("jquery", function(t) { r.path = layui....

    百度首页的jQuery是百度自己重构的,如果直接调用百度的jquery而没有注入完整的jquery会至这个情况,其次百度还有个模块化define也是重构的,也会导致报错;解决办法解压layer,修改入口调用
    在这里插入图片描述
    移除红色这块的代码即可,或者复制我下面代码直接替换

    // 搜索该代码
    e.layui && layui.define ? (r.ready(), layui.define("jquery", function(t) {
           r.path = layui.cache.dir, o.run(layui.$), e.layer = r, t("layer", r);
       })) : "function" == typeof define && define.amd ? define([ "jquery" ], function() {
           return o.run(e.jQuery), r;
       }) : function() {
           o.run(e.jQuery), r.ready();
       }();
    // 修改为如下代码
    e.layui && layui.define ? (r.ready(), layui.define("jquery", function(t) {
            r.path = layui.cache.dir, o.run(layui.$), e.layer = r, t("layer", r);
        })) :  function() {
            o.run(e.jQuery), r.ready();
        }();
    
    展开全文
  • layer 弹出默认全屏

    万次阅读 2017-12-09 10:50:19
    //弹出即全屏 var index = layer.open({ type: 2, content: 'http://www.layui.com', area: ['300px', '195px'], maxmin: true }); layer.full(index);

    使用以下代码,弹出即全屏

    
    var index = layer.open({
        type: 2,
        content: 'http://www.layui.com',
        area: ['300px', '195px'],
        maxmin: true
    });
    layer.full(index);
    
    

    展开全文
  • Layer与Sorting Layer

    千次阅读 2017-12-14 15:29:27
    layer主要通过光线投射来选择性地忽略碰撞器,或者添加碰撞功能。 而sorting layer就是一个渲染层级的顺序的控制。 决定Unity渲染关系的层级顺序是: Camera  sorting layer sorting order


    layer主要通过光线投射来选择性地忽略碰撞器,或者添加碰撞功能。
    而sorting layer就是一个渲染层级的顺序的控制。

    决定Unity渲染关系的层级顺序是:
    Camera 
    sorting layer
    sorting order


    展开全文
  • 一、分层 通过借鉴计算机网络通信体系架构的OSI模型,可将区块链逻辑架构划分为三层。 1. layer0 ...其中第0层(Layer 0)对应OSI模型的1-4层(底层协议),...Layer 1 解决信任,Layer 1 的代币的存在是为了让这...
  • 不再混淆Layer,sorting layer,order in layer

    千次阅读 2017-03-30 11:13:38
    1、Sprite Renderer、ParticleSystem有sorting layer,order in layer。 2、Canvas根据Render Mode的不同,属性显示不同,当为ScreenSpace-Overlay时,只有sort Order属性,其他两种模式有sorting layer和order in ...
  • layer自定义样式

    万次阅读 2020-09-25 10:08:00
    body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;} body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7} body .demo-class .layui-layer-btn a{background:#333;} ...
  • layer系列之弹层layer.prompt

    千次阅读 2019-09-26 13:37:08
    layer官网:https://www.layui.com/doc/modules/layer.html layer在线调试:http://layer.layui.com/ 如何使用layer.prompt在输入值为空的情况下点击确定继续执行逻辑? 使用layer.open实现方式: 附:源码如下 ...
  • Layer Normalization

    万次阅读 2016-11-15 11:08:18
    code : https://github.com/ryankiros/layer-norm本文主要是针对 batch normalization 存在的问题 提出了 Layer Normalization 进行改进的。这里首先来回顾一下 batch normalization : 对于前馈神经网络第 l 隐层...
  • 本篇博客总结几种归一化办法,并给出相应计算公式和代码。 1、综述 1.1 论文链接 ...1、Batch Normalization ...2、Layer Normalizaiton https://arxiv.org/pdf/1607.06450v1.pdf 3、Instance Normalization h...
  • layer系列之-弹出层全屏及关闭

    万次阅读 2016-10-09 11:14:39
    一、首先引用JS文件 <script src="../../js/common/layer/layer.js"></script> 二、全屏调用以下代码 var index = layer.open({ type: 2, content: url, ...
  • layer的open使用

    万次阅读 2018-05-29 11:53:21
    最近接触到layer弹窗,感觉弹窗功能异常强大,真的很方便,所以记录下来; 1.layer官网:http://layer.layui.com/ 在这里下载需要的js 2.语法:layer.open(options) 3.实例: var index = layer.open({ ...
  • layer.js

    千次阅读 2016-12-15 20:02:48
     我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要...
  • Sorting Layer 和 Order in Layer 的区别

    万次阅读 2018-06-08 17:43:18
    在 Order in Layer 中我们可以指定同一层Sorting Layer 的优先级比如 上图两个游戏物体的Sorting Layer同为role层 ,但是第一个游戏物体的Order in Layer 为0,而第二个游戏物体的Order in Layer 为1 ,则第二个...
  • Chromium网页Layer Tree同步为Pending Layer Tree的过程分析

    万次阅读 热门讨论 2016-05-09 01:02:36
    CC Layer Tree绘制完成后,会同步到一个新的CC Pending Layer Tree去。同步过程由Compositor线程执行,并且Main线程处于等待状态。所谓同步,就是将CC Layer Tree的内容拷贝到CC Pending Layer Tree去。同步完毕,...
  • layer的btn按钮

    万次阅读 2020-09-25 10:46:01
    两种弹出框 <script> layui.use(['layer', 'jquery'], function () { var layer = layui.layer, $ = layui.jquery; $('.layui-btn').on('click', function () { layer.open({ content:'侧是', bt
  • layer-list -- layer-list的基本使用介绍

    万次阅读 多人点赞 2016-12-06 12:56:06
    1. layer-list 是啥?有啥作用?点击查看 安卓官方开发指南中关于layerlsit的说明(1). layer-list 是啥?简单理解,layer 是层,list 是列表,那么 layer-list 就是层列表的意思。但是,是什么层列表呢?? 其实 ...
  • layer.tips使用

    万次阅读 2018-09-27 16:31:31
    layer.tips实现划过显示,划出隐藏效果 layer-tips使用 1、引入文件 layer.css 、 layer.js 2、参数介绍: layer.tips(content, follow, options) - tips层 { content:tooltip内容可以是str,也可以是html代码 ...
  • layer的anim动画

    万次阅读 2020-09-25 10:56:40
    <script> layui.use(['layer', 'jquery'], function () { var layer = layui.layer, $ = layui.jquery; $('.layui-btn').on('click', function () { layer.confirm('纳尼?', { anim:2, area
  • layer弹出层的使用: 1,layer弹出提示框 2,layer弹出一张图片 3,layer地图弹出框 1,下载jquery,layer http://layer.layui.com/(网上一搜,上官网下载就行了) 2,引入项目 3,使用 注意...
  • Unity中SortingLayer、Order in Layer和RenderQueue的讲解

    千次阅读 多人点赞 2020-04-07 15:33:57
    文章目录一.... Sorting Layer2. Order in Layer四. Shader的RenderQueue 一. 前言 Unity游戏开发中,模型、界面、特效等等,需要规划好层的概念,涉及到摄像机(Camera)、画布(Canvas)、Sha...
  • 网页分块的光栅化操作完成后,CC Pending Layer Tree就会激活为CC Active Layer Tree。CC Active Layer Tree代表用户当前在屏幕上看到的网页内容,它可以快速响应用户输入,例如滚动和缩放。本文接下来就分析CC ...
  • vue-layer,在vue中的layer插件

    万次阅读 2018-03-13 11:04:07
    npm install vue-layer 在程序入口添加 import Vue from 'vue'; import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 调用 this.$layer.alert("!"); Attribut { type: 0, title:...
  • layer.alert 效果图: 代码:   //取消提现 function back(id) { layer.alert('真的要取消吗', { skin: 'layui-layer-molv' //样式类名 自定义样式 ,closeBtn: 1 // 是否显示关闭按钮 ,anim: 1 //动画...
  • layer更改皮肤

    万次阅读 2018-05-28 12:19:35
    layUI的弹出层模块layer在使用时有一个skin属性skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。如果要改变弹出层的title样式或者背景之类的就可以使用该属性。使用方法如下:在layer.open...
  • keras Layer

    千次阅读 2016-07-07 11:05:49
    keras LayerSimple IntroductionKeras实现了很多层,包括核心层、卷基层、RNN网络层等诸多常用的网络结构。Core 核心层Sourceclass Layer(object): '''Abstract base layer class. All Keras layers accept ...
  • Keras Layer自定义( layers.Layer

    千次阅读 2019-03-15 15:56:54
    实现一个简单层需要首先继承 layers.Layer 类即可,如下是官方网站上的例子: rom keras import backend as K from keras.engine.topology import Layer import numpy as np class MyLayer(Layer):...
  • layer的loading

    千次阅读 2018-12-27 11:23:29
    layer的loading弹框 注意 :layer中的loading有一个是message,大概2秒就自动消失了,那个不好用 // 开启模态框 layer.load(1, { content: '同步请求中,请稍后', shade: [0.4, '#393D49'], ...
  • 常见layer.confirm用发

    万次阅读 多人点赞 2018-05-22 18:52:05
    自定义弹窗: function saveBack(museId) { var str = "<div><h4>会费返还</h4><p>金额:<input type='text' id='price' />... layer.confirm(str, {btn: ['确定'...
  • layui框架——弹出层layer

    万次阅读 多人点赞 2018-07-26 10:11:56
    1、引用独立的layer.js文件 引入好layer.js后,直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 488,571
精华内容 195,428
关键字:

layer