16
2019
12

Bootstrap通过按钮状态提示加载状态

通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态

通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了

[注意]如果不设置data-loading-text,则按钮文本在Loading状态时,默认显示的是'loading...'

例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.css">
</head>

<body style="">
<button class="btn btn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>
<script>
$(function(){
    $("#loaddingBtn").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
          $btn.button('reset')
        },1000);
      });
}); 
</script>
	</body>
</html>

原文链接:https://www.qiquanji.com/post/8296.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

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