《layui宇宙版教程》:弹出层-3

《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:

 

1.18.21 resize是否允许拉伸

类型:Boolean,默认值true。

默认情况下,可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "test text 1",

              resize: false

           });

       </script>

    </body>

</html>

 

    弹出层的大小不可以改变。

1.18.22 resizing监听窗口拉伸动作

类型:Function,默认值null。

当拖拽弹层右下角进行尺寸调整时,如果设置了该回调,则会执行。回调返回一个参数:当前层的DOM对象。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

        <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "test text 1",

              resizing: function(layero) {

                  var abc = layero;

                  var xyz = "";

              }

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.18.23 scrollbar是否允许浏览器出现滚动条

类型:Boolean,默认值true。

默认允许浏览器滚动,如果设置scrollbar: false,则屏蔽。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "test text 1",

               scrollbar: false

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.18.24 maxWidth最大宽度

类型:Number,默认值360px。

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

一般在布局时,不想要元素的宽度限定死,并且想要它的实际宽度随其本身内容自适应,但又不想宽度过大破坏整体布局,这时候就会应用max-width限制元素的最大宽度,元素实际宽度在0~max-width之间。具有自动换行的效果。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "begin<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end",

              area: ['2000px', '300px'],

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

宽高都固定了,并且看不到begin和end字符串信息,过多的信息全被隐藏了,这就是固定宽高的缺点。

使用属性maxWidth除了支持最大宽度外还可以实现宽度自适应。

测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           layer.open({

              type: 1,

              content: "begin<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end",

               area: 'auto',

              maxWidth: 2000

           });

       </script>

    </body>

</html>

 

 

    最大宽度显示效果如图1-xx所示。

 

    并且还具有宽度自适应的效果,如图1-xx所示。

 

    浏览器在任何宽度下都可以把信息显示完整。

1.18.25 maxHeight最大高度

类型:Number,默认值无。

请注意:只有当高度自适应时,maxHeight的设置才有效。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

               type: 1,

              content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",

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

           });

       </script>

    </body>

</html>

 

    固定宽高的运行效果如图1-xx所示。

 

    在弹出层的下面出现了大面积空白,影响界面美观性,属性maxHeight支持高度自适应。

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

               type: 1,

              content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",

               area: 'auto',

              maxHeight: 400

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

    通过使用属性maxHeight后,弹出层下面的大面积空白消失了,说明属性maxHeight支持高度自适应。

 

    如果内容过多,最大高度maxHeight还有效吗?

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "begin!begin!begin!<span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span><span style='color:red'>我是span</span>end!end!end!",

              area: 'auto',

              maxHeight: 400

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

    内容超过400px后出现垂直滚动条,最大高度是400px。

1.18.26 zIndex层叠顺序

默认值19891014(作者贤心生日)。

一般用于解决和其它组件的层叠冲突。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <div style="position: absolute; z-index: 19891015;">我在最上面!</div>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "begin!begin!begin!end!end!end!",

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

自定义div的z-index: 19891015值大于19891014,所以文字可以选中,说明自定义div在遮罩层之上。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <div style="position: absolute; z-index: 100;">我在最上面!</div>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "begin!begin!begin!end!end!end!",

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

    文字“我在最上面!”选中不了了,因为在遮罩层的下面,被遮罩层覆盖了。

1.18.27 move触发拖动的元素

类型:String/DOM/Boolean,默认值'.layui-layer-title'。

默认是触发标题区域实现拖拽。如果想单独定义,指向元素的选择器或者DOM即可。如move: '.mine-move'。还配置设置move: false来禁止拖拽。

1.18.27.1 测试String

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "<span class='myspanclass'>我的span</span>",

              move: '.myspanclass'

           });

        </script>

    </body>

</html>

 

1.18.27.2 测试DOM

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <div id="mydiv" style="display: none;">

           <div>我是div</div>

       </div>

        <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: $("#mydiv"),

              move: $("#mydiv div")

           });

       </script>

    </body>

</html>

 

1.18.27.3 禁用move

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "<span style='color:red'>我是span</span>",

              move: false

           });

       </script>

    </body>

</html>

 

1.18.28 moveOut是否允许拖拽到窗口外

类型:Boolean,默认值false。

默认只能在窗口内拖拽,如果想拖到窗外,那么设置moveOut: true即可

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

        <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "<span style='color:red'>我是span</span>",

              moveOut: true

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.18.29 moveEnd拖动完毕后的回调方法

类型:Function,默认值null。

默认不会触发moveEnd,如果需要可以设置moveEnd: function(layero){}即可。其中layero为当前层的DOM对象

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

        <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <script src="layui/layui.all.js"></script>

       <script>

           var layer = layui.layer;

           layer.open({

              type: 1,

              content: "<span style='color:red'>我是span</span>",

              moveEnd: function(layero) {

                  alert('拖动结束!');

              }

           });

       </script>

    </body>

</html>

 

1.18.30 tips方向和颜色

类型:Number/Array,默认值2。

tips层的私有参数。支持上右下左四个方向,通过1-4进行方向设置。如tips: 3则表示在元素的下面出现。有时还可能会定义一些颜色,可以设置tips: [1, '#c00']。

1.18.30.1 测试1

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <form class="layui-form" action="">

           <div class="layui-form-item" style="width: 500px;margin: 400px;"">

              <label class=" layui-form-label">输入框</label>

              <div class="layui-input-block">

                  <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"

                   class="layui-input">

              </div>

           </div>

       </form>

       <script src="layui/layui.all.js"></script>

       <script>

           var form = layui.form;

           var layer = layui.layer;

           layer.open({

              type: 4,

               tips: [1, 'red'],

              content: ['内容不能为空', '#username']

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.18.30.2 测试2

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <form class="layui-form" action="">

           <div class="layui-form-item" style="width: 500px;margin: 400px;"">

              <label class=" layui-form-label">输入框</label>

              <div class="layui-input-block">

                  <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"

                   class="layui-input">

              </div>

           </div>

       </form>

       <script src="layui/layui.all.js"></script>

       <script>

           var form = layui.form;

           var layer = layui.layer;

           layer.open({

              type: 4,

              tips: [2, 'red'],

              content: ['内容不能为空', '#username']

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.18.30.3 测试3

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <form class="layui-form" action="">

           <div class="layui-form-item" style="width: 500px;margin: 400px;"">

              <label class=" layui-form-label">输入框</label>

              <div class="layui-input-block">

                  <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"

                   class="layui-input">

              </div>

           </div>

       </form>

       <script src="layui/layui.all.js"></script>

       <script>

           var form = layui.form;

           var layer = layui.layer;

           layer.open({

              type: 4,

              tips: [3, 'red'],

              content: ['内容不能为空', '#username']

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.18.30.4 测试4

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="js/jquery3.5.1.js"></script>

    </head>

    <body>

       <form class="layui-form" action="">

           <div class="layui-form-item" style="width: 500px;margin: 400px;"">

              <label class=" layui-form-label">输入框</label>

              <div class="layui-input-block">

                  <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off"

                   class="layui-input">

              </div>

           </div>

       </form>

       <script src="layui/layui.all.js"></script>

       <script>

           var form = layui.form;

           var layer = layui.layer;

           layer.open({

              type: 4,

              tips: [4, 'red'],

              content: ['内容不能为空', '#username']

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值