按钮插件--按钮加载状态，玩转Bootstrap（JS插件篇）教程-慕课网

按钮插件--按钮加载状态

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

<button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>

通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示：

$(function(){
    $("#loaddingBtn").click(function () {
        $(this).button("loading");
      });
});

运行效果如下：

点击前：

点击后：

注意，无法直接通过声明式触发此效果。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>按钮插件--按钮加载状态</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body{padding:10px;margin:10px;}
</style>
</head>
<body>
<button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
？？？
</script>
</body>
</html>

按钮插件--按钮加载状态