zoukankan      html  css  js  c++  java
  • Layui 弹出层组件——layer

         layer是作为Layui【经典模块化前端框架】的一个弹层模块,由于其用户基数较大,所以把layer作为独立组件来维护。

    基础参数:

      基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,我们不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。

    1、type - 基本层类型

    类型:Number,默认:0

    layer提供了5种层类型。可传入的值有:0(信息框,默认),1(页面层),2(iframe层),3(加载层),4(tips层)。 若采用的是 layer.open({type: 1}) 方式调用,则type为必填项(信息框除外)

    2、title - 标题

    类型:String/Array/Boolean,默认:'信息'

    title支持三种类型的值,

    若传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;

    若还需要自定义标题区域样式,那么可以写title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;

    若不想显示标题栏,可以t写 title: false

    3、content - 内容

           类型:String/DOM/Array,默认:''

           content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。比如:

     1 /!*
     2  如果是页面层
     3  */
     4 layer.open({
     5   type: 1, 
     6   content: '传入任意的文本或html' //这里content是一个普通的String
     7 });
     8 layer.open({
     9   type: 1,
    10   content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
    11 });
    12 //Ajax获取
    13 $.post('url', {}, function(str){
    14   layer.open({
    15     type: 1,
    16     content: str //注意,如果str是object,那么需要字符拼接。
    17   });
    18 });
    19 /!*
    20  如果是iframe层
    21  */
    22 layer.open({
    23   type: 2, 
    24   content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
    25 }); 
    26 /!*
    27  如果是用layer.open执行tips层
    28  */
    29 layer.open({
    30   type: 4,
    31   content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
    32 });        

    4、area - 宽高

    类型:String/Array,默认:'auto'

    在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,可以area: ['500px', '300px']

    5、maxWidth - 最大宽度

    类型:,默认:360

    请注意:只有当area: 'auto'时,maxWidth的设定才有效。

  • 相关阅读:
    scala-隐式转换
    scala-泛型
    scala-模式匹配
    scala-LinkedList
    scala-高阶函数
    scala-数组/列表
    scala-map
    scala语法
    机器学习笔记
    Day 1 下午
  • 原文地址:https://www.cnblogs.com/shenxiaolin/p/6306054.html
Copyright © 2011-2022 走看看