layui里面的loading加载层自定义文字(两种方式)

 方法一

//loading层
var index = layer.load(2, { //icon0-2 加载中,页面显示不同样式
    shade: [0.4, '#000'], //0.4为透明度 ,#000 为颜色
    content: '加载中...',
    success: function (layero) {
        layero.find('.layui-layer-content').css({
            'padding-top': '40px',//图标与样式会重合,这样设置可以错开
            'width': '200px'//文字显示的宽度
        });
    }
});

$.post('',{},function(){
//请求结束关闭加载层

layer.close(index);

});

方法二

 

      var load = layer.msg('加载中...', {
            icon:16,
            shade:[0.1, '#fff'],
            time:false  //取消自动关闭
        });   

        setTimeout(function () {
            layer.close(load);
        }, 3000);//3秒后关闭加载层

 

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要将 jqGrid 中的 loading 改为 layui.loading 并居中加载,可以按照以下步骤进行操作: 1. 在页面引入 layui 的样式文件和 js 文件。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script> ``` 2. 定义一个方法,用于显示 layuiloading。 ```javascript function showLoading() { var loading = layui.layer.load(2, { shade: [0.3, '#333'] }); return loading; } ``` 该方法中,`layui.layer.load()` 方法用于显示 loading,参数 2 表示显示类型为转圈加文字,`shade` 参数表示遮罩颜色和透明度。 3. 在 jqGrid 加载数据前显示 loading加载完成后隐藏 loading。 ```javascript // 在 jqGrid 加载数据前显示 loading $("#grid").jqGrid({ ... loadBeforeSend: function(xhr, settings) { var loading = showLoading(); $(this).data("loading", loading); // 将 loading 对象存储在 jqGrid 中 }, ... }); // 加载完成后隐藏 loading $("#grid").jqGrid({ ... loadComplete: function(data) { var loading = $(this).data("loading"); layui.layer.close(loading); }, ... }); ``` 在 `loadBeforeSend` 回调函数中,调用 `showLoading` 方法显示 loading,并将 loading 对象存储在 jqGrid 中。在 `loadComplete` 回调函数中,通过 `$(this).data("loading")` 获取存储的 loading 对象,并调用 `layui.layer.close` 方法隐藏 loading。 4. 居中显示 loading。 ```css #layui-layer2 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 通过给 loading 所在的 div(id 为 `layui-layer2`)设置样式,使其在页面居中显示。 以上就是将 jqGrid 中的 loading 改为 layui.loading 并居中加载的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr阁主

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值