layui.layer弹层组件

前端 同时被 3 个专栏收录
3 篇文章 0 订阅
2 篇文章 0 订阅
14 篇文章 0 订阅

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>
  1. 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);
  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏作者

QwoYko.

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值