zoukankan      html  css  js  c++  java
  • layer.js 学习笔记

    了解到一个很好用的弹框插件,名字叫layer.js

    前几天要在网页中改写alert函数,自己写了一个模态框,虽然效果出来了,但是点击关闭后,无法返回当前页面。请教大神时,说有一个叫layer.js的东西,做弹窗很好,怀着好奇的心情,试着接触了一下,果然非常ok,而且比自己写的模态框还好用,关键是很多东西都可以改,呵呵,下面列举一下,方便自己以后查阅

    layer 是建立在jquery.js基础上的,它的选择器就是使用jquery来完成的,所以要使用layer,首先要引入query.js,而且需要映入jquery-1.8 以上版本的

    引入方式:直接引入

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/layer.js"></script>

    layer 调用:

    分为两部分,

    其一是参数部分,文档介绍有34个参数,也就是基础参数,实际上个人觉得不需要知道那么多,浏览一遍,心里有个印象,到使用的时候,再来看看,可能效果更好,否则是很难记住的

    其二是函数部分,有21个函数,也叫做方法,调用layer时,就是使用这些方法。其中18个内置方法,3个其他方法

    了解了参数和方法,然后调用就简单了

    引入了jquery和layer后,就可以调用了

    调用方式:

    layer.方法名(参数1,参数二,.....)

    例如(需要在js文件或者script标签里调用):

    layer.msg('现在调用的是信息提示框,执行后,将会在窗口弹出一个信息窗口');

    运行结果:

    参数的调用,实际上掉用的是一个对象,例如:

    layer.open({

                参数1:值1,

                参数2:值2,

                参数3:值3,

                ................

              });

    所有的参数,都可以往里面加,你想要调用几个参数,就加几个参数。写完参数,发现,其实layer.open调用的,是一个json 对象,json对象里包含了所要调用的值,这就完成参数的添加

    参数1:Type 基本层类型,Type的值有5 种: 

                                    分别是 :0 信息框(默认),1 页面层,2 iframe层,3  加载层,4 tips层

    调用方式:layer.open({

          type:0,

          });

    参数2:Title ,类型:String/Array/Boolean,默认:'信息'

    调用方式:layer.open({

          type:0,

          title:'这就是标题title',

          });

    参数3:Content ,类型:String/DOM/Array,默认:''

    调用方式:layer.open({

          type:0,

          title:'这就是标题title',

          content:'这里是内容区块,想写什么就写上呀',

          });

    参数4:Skin    类型:String,默认:'' 

    1. //单个使用
    2. layer.open({
    3. skin: 'demo-class'
    4. });
    5. //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
    6. layer.config({
    7. skin: 'demo-class'
    8. })
    9. //CSS
    10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
    11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
    12. body .demo-class .layui-layer-btn a{background:#333;}
    13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
    14. 加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域

    调用方式:layer.open({

          type:0,

          title:'这就是标题title',

          content:'这里是内容区块,想写什么就写上呀',

          skin: 'layui-layer-rim', //加上边框

          });

    下面左边的图是有边框的,右边的图是没有边框的,差异就是左边的代码调用的时候,加了一个  skin:'layui-layer-rim',

           

    参数5:area     类型:String/Array,默认:'auto'    ,弹框的宽高

    调用方式:layer.open({

          type:0,

          title:'这就是标题title',

          content:'这里是内容区块,想写什么就写上呀',

          area: ['400px', '200px'],  

          });

    备注:弹框的区域,为  400*200  px

    参数6:offset   类型:String/Array,默认:垂直水平居中

    参数7:icon      信息框和加载层的私有参数    类型:Number,默认:-1(信息框)/0(加载层)

    调用方式:layer.open({

          type:0,

          title:'这就是标题title',

          content:'这里是内容区块,想写什么就写上呀',

          area: ['400px', '200px'],  

          icon:1,

          });

    还有很多参数,就 不一一列举了

    详细请查看:http://www.layui.com/doc/modules/layer.html

    下面说下函数方法:

    方法1:layer.config( options )

    调用方法:设置路径

    设置参数:

    函数方法2:

    layer.ready( callback);

    调用方法:

      layer.ready( function(){
                layer.msg('这个函数一开始就已经执行了')
                });

    函数方法3:layer.open( { 参数:值,........})

    在上面的参数举例的时候,调用的就是 open 方法,如下例子:

    调用方式:layer.open({

          type:0,

          title:'这就是标题title',

          content:'这里是内容区块,想写什么就写上呀',

          area: ['400px', '200px'],  

          icon:1,

          });

    函数方法还有很多,也不一一举例了,可以参考链接: http://www.layui.com/doc/modules/layer.html#layer.config

    真心感觉很好,推荐各位也试试

    http://www.cnblogs.com/huanying2015 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    第九届蓝桥杯JavaA组省赛真题
    Qt的IDE开发环境(KDevelop,MonKey Studio,QDevlop,Dev-cpp,Cobras,Edyuk)
    Eclipse+Qt开发环境设置(Linux和Win)
    Visual Studio 2005安装qt-win-commercial-src-4.3.1,并设置环境变量
    在VC6.0中编译头文件时产生moc文件
    Qt配置信息设置(QSettings在不同平台下的使用路径)
    应对业务需求变化?
    开发环境准备:Ruby on Rails开发环境配置
    VS2013中Python学习环境搭建
    JQUERY 插件开发——MENU(导航菜单)
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8094142.html
Copyright © 2011-2022 走看看