layui.layer弹层组件

最新推荐文章于 2024-05-15 11:25:51 发布

QwoYko.

最新推荐文章于 2024-05-15 11:25:51 发布

阅读量1.9k

点赞数 3

分类专栏：前端服务器 java 文章标签：前端 layui

本文链接：https://blog.csdn.net/qq_47953504/article/details/109245787

版权

java 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

服务器

2 篇文章 0 订阅

订阅专栏

layui.layer

layui前端UI框架
layer弹层组件

layui前端UI框架

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互。
**兼容:**layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

layer弹层组件

layer 是作为 layui 的一个弹层模块.layer可以独立使用，也可以通过Layui模块化使用。

layer使用方法

1.作为独立组件使用
需要下载layer组件包、引入jQuery1.8以上的任意版本，并引入layer.js.

 <script src="js/jquery2.1.4.js"></script>
 <script src="layer/layer.js"></script>
// 引入好layer.js后，直接用即可
 <script>
 layer.msg('hello'); 
 </script>

layui 模块化使用
需要下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js

layui.use('layer', function(){
  var layer = layui.layer;
  layer.msg('hello');
});

layer方法使用

layer.msg(content, options, end) - 提示框

content:文本内容
options:基础参数
end:层销毁后触发的回调

<script>
    function msgOne(){
       layer.msg("天干物燥,小心火烛",{icon:6});//icon:0-6
          }
</script>
<body>
    <button onclick="msgOne()">msg函数</button>
</body>

在这里插入图片描述

layer.load(icon, options) - 加载层

icon:图标。信息框和加载层的私有参数
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2

<script>
function onloadOne() {
            var index = layer.load(1); //icon数值在0-2
            setTimeout(function () {
                layer.close(index);
            },2000);
        }
        function onloadTwo() {
          var indexOne = layer.load(2,{time: 8000});
          layer.close(indexOne);
        }
</script>
<body>
    <button onclick="onloadOne()">onload函数1</button>
    <button onclick="onloadTwo()">onload函数2</button>
</body>

在这里插入图片描述

layer.tips(content, follow, options) - tips层

follow:事件回调体(对象)

<script>
      function tipOne() {
            layer.tips( "曹丕","#sq",{tipsMore:true,tips:3});
        }
</script>
<body>
   <button onclick="tipOne()">tip函数</button>
</body>

tips - tips方向和颜色:上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, ‘#c00’]
tipsMore - 是否允许多个tips.允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启

在这里插入图片描述

layer.alert(content, options, yes) - 普通信息框

yes:确定按钮回调方法

<script>
     function alertOne() {
            layer.alert("这就是嗨的代价",{icon: 6})
        }
</script>
<body>
   <button onclick="alertOne()">alert函数</button>
</body>

在这里插入图片描述

layer.close(index) - 关闭特定层

index:每一种弹层调用方式，都会返回一个index,它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的

 var indexOne = layer.load(2,{time: 8000});
          layer.close(indexOne);

QwoYko.

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
layui.layer弹层组件

layui.layerlayui前端UI框架layer弹层组件layer使用方法layer方法使用layer.msg(content, options, end) - 提示框layer.load(icon, options) - 加载层layer.tips(content, follow, options) - tips层layer.alert(content, options, yes) - 普通信息框layer.close(index) - 关闭特定层layui前端UI框架layui（谐音：类UI)
复制链接

扫一扫