详细信息
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
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。