具有 jqXHR/Promise 支持的内联加载 (Ladda) 按钮 - 可等待按钮

具有 jqXHR/Promise 支持的内联加载 (Ladda) 按钮 - 可等待按钮

版本:

浏览量:1101

最后更新:2021-09-12

应用标签:MAC 软件Jquery插件git

推荐指数:

详细信息

Waitable Button jQuery 插件,它在处理 AJAX 请求时在操作按钮内显示内联加载微调器,并在请求完成或失败时返回 jqXHR 或 jQuery Promise 对象。也称为拉达按钮。

非常适合根据 AJAX 请求自动更新按钮状态而不离开当前页面的提交按钮

替代插件:

  • 用于 Bootstrap 3 的带有内置加载指示器的按钮 - Ladda Bootstrap

  • 用于在按钮中内置加载指示器的 jQuery 插件 - 按钮加载器

  • 带有内置加载指示器的表单提交按钮 - Ladda

  • jQuery 的最小 Ladda 按钮插件 - loadingBtn.js

如何使用它:

1. 从 CDN 加载必要的 jQuery JavaScript 库。

<script src="https://code.jquery.com/jquery.min.js"></script>

2. 下载并加载文档中的 jQuery Waitable Button 插件文件。

<link href="jquery.waitablebutton.css" rel="stylesheet">
<script src="jquery.waitablebutton.js"></script>

3. 调用操作按钮上的onClick函数并定义一个返回 jqXhr 或 promise 对象的函数。

// uses jQuery XMLHttpRequest
$('#button').waitableButton({
  onClick: function() {
    var req = jQuery.ajax({
        url: '#'
    });
     
    req.done(function() {
      alert('Done');
    });
     
    req.fail(function() {
      alert('Failed');
    });
     
    return req;
  }
});
 
// uses jQuery Deferred
$('#button').waitableButton({
  onClick: function() {
    return jQuery.ajax({
      url: '#'
    });
  }
});
var promise = jQuery('#button').waitableButton('promise');
promise.done(function() {
  alert('Done');
});
promise.fail(function() {
  alert('Failed');
});

4. 根据当前状态将自定义 CSS 类应用于操作按钮。

$('#button').waitableButton({
  baseClass: '',
  doneClass: '',
  failClass: '',
});

5. 判断请求完成后是否关闭按钮。默认值:假。

$('#button').waitableButton({
  disabledOnDone: true
});

6. 自定义微调器大小。默认值:16 像素。

$('#button').waitableButton({
  spinnerSize: 32 // or 64
});
联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。