Javascript Show Loading.. 在 bootstrap 4 中使用 jquery 和 data-loading-text
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48240011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Loading.. using jquery in bootstrap 4 with data-loading-text
提问by Adarsh Madrecha
I am trying to achieve a loading effect for a button, as demonstrated in codepen.
我正在尝试实现按钮的加载效果，如codepen 中所示。
I am using bootstrap 4(beta 2) Jquery 3.2.1.
我正在使用bootstrap 4(beta 2) Jquery 3.2.1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Group View</title>
<link rel="stylesheet" media="all" href="../css/bootstrap.css" >
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap-bundle.js"></script>
</head>
<body>
<div>
<button type="button" class="btn btn-primary btn-lg">Submit Order</button>
</div>
<script>
$(document).ready(function() {
$('button').data('loading-text', 'loading...');
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
})
</script>
</body>
</html>
The above code does not display "loading..." when the button is clicked.
单击按钮时，上面的代码不会显示“正在加载...”。
回答by Sébastien
I'm not sure the .button()method in Bootstrap v4 has the options you are trying to use. The Codepen you link to uses Bootstrap v3.
我不确定.button()Bootstrap v4 中的方法是否包含您尝试使用的选项。您链接到的 Codepen 使用 Bootstrap v3。
Here is how you could replicate the same behavior with Bootstrap 4.
以下是如何使用 Bootstrap 4 复制相同的行为。
$(document).ready(function() {
$('.btn').on('click', function() {
var $this = $(this);
var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
if ($(this).html() !== loadingText) {
$this.data('original-text', $(this).html());
$this.html(loadingText);
}
setTimeout(function() {
$this.html($this.data('original-text'));
}, 2000);
});
})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div>
<button type="button" class="btn btn-primary btn-lg">Submit Order</button>
</div>回答by user3456070
回答by Mavelo
Ran into this same issue a few days ago and nobody seems to have a solution. So here's my jQuery plugin that seems to provide the same behavior in Boostrap 4.
几天前遇到了同样的问题，似乎没有人有解决方案。所以这是我的 jQuery 插件，它似乎在 Boostrap 4 中提供了相同的行为。
(function($) {
$.fn.button = function(action) {
if (action === 'loading' && this.data('loading-text')) {
this.data('original-text', this.html()).html(this.data('loading-text')).prop('disabled', true);
}
if (action === 'reset' && this.data('original-text')) {
this.html(this.data('original-text')).prop('disabled', false);
}
};
}(jQuery));
More details: How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery(my blog)
更多细节：如何在 Bootstrap 4 中使用 jQuery 继续使用带有“数据加载文本”的按钮（我的博客）
回答by Danny D Mamaev
I've run into the same problem and tried the example uploaded by Mavelo above however it didn't work on the queries like this:
我遇到了同样的问题并尝试了上面由 Mavelo 上传的示例，但是它不适用于这样的查询：
$('button').button('reset')
$('button').button('reset')
which operates on multiple objects. Here's a modified code that supports both single and multiple button queries:
它对多个对象进行操作。这是一个支持单按钮和多按钮查询的修改后的代码：
(function($) {
$.fn.button = function(action) {
if (this.length > 0) {
this.each(function(){
if (action === 'loading' && $(this).data('loading-text')) {
$(this).data('original-text', $(this).html()).html($(this).data('loading-text')).prop('disabled', true);
} else if (action === 'reset' && $(this).data('original-text')) {
$(this).html($(this).data('original-text')).prop('disabled', false);
}
});
}
};
}(jQuery));