59

我试图让这个确切的例子在我的网站上运行：

http://getbootstrap.com/2.3.2/javascript.html#buttons

但是，只需包含此 HTML：

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

不工作。我正在运行 jQuery 1.7.x 并加载了 Bootstrap JS 文件。

具体来说：我希望按钮移动到“加载”文本更改稍有延迟，然后返回常规文本。我的谷歌搜索似乎没有一个很好的在线示例（大多数都要求永久状态更改或切换），并且 Bootstrap 站点本身在此处缺少文档。

4

7 回答 7

103

在文档页面中，正在加载一个名为 application.js 的文件。http://twitter.github.com/bootstrap/assets/js/application.js

// button state demo
$('#fat-btn')
    .click(function () {
        var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
            btn.button('reset')
        }, 3000)
    });
于 2012-08-25T00:33:17.277 回答
21

或者只是添加它，以便它获取 Twitter Bootstrap 属性。

$('button[data-loading-text]').click(function () {
    $(this).button('loading');
});
于 2013-06-19T10:33:04.300 回答
6

记下接受的答案如何在运行 button('loading') 之前将 jQuery 按钮对象转换为 js var，因为虽然这有效，但直接在 jQuery 按钮对象上使用时 button('loading') 将不起作用.

于 2012-11-20T00:45:13.187 回答
2

只包括引导库：

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>

这是一个例子：

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE>Bootstrap Example</TITLE>
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css ">
<STYLE>
</STYLE>
</HEAD>
<BODY>
    <button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)">hola!!!</button>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
    <script type="text/javascript">
        $(function(){
            $('#btnD').click(function(){
                  var btn = $(this); 
                  btn.button('loading');
            });
        });
    </script>
</BODY>
</HTML>
于 2013-07-25T18:05:04.000 回答
1

此外，jquery 有 .delay() 方法，它可能比 setTimeout 更容易使用。

于 2012-09-19T19:30:40.353 回答
0

我的按钮

<button type="submit" id="upgrade-subscription" class="btn btn-primary btn-subscribe" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Payment Processing">upgrade</button>

江青

$('#upgrade-subscription').click(function () {
    $(this).button('loading');
});
于 2020-01-16T10:19:35.400 回答
-7

放个小js就行了

onclick="$(this).button('loading');"
于 2013-05-18T16:48:54.637 回答