Ada*_*cha 20 html javascript jquery button bootstrap-4
我正在尝试为按钮实现加载效果,如codepen中所示.
我正在使用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>
单击按钮时,上面的代码不显示"loading ...".
Séb*_*ien 40
我不确定.button()Bootstrap v4中的方法是否具有您尝试使用的选项.您链接到的Codepen使用Bootstrap v3.
以下是使用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>几天前遇到了同样的问题，似乎没有人解决。所以这是我的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));
更多详细信息：如何在带有jQuery的Bootstrap 4中继续使用带有“数据加载文本”的按钮（我的博客）