Question

我正在尝试在我的网站上运行这个确切的示例：

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网站本身缺少文档。

Answer 1

在文档页面中，有一个名为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)
    });

Answer 2

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

$('button[data-loading-text]').click(function () {
    $(this).button('loading');
});

Answer 3

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

Answer 4

只包含引导程序库：

<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>

Answer 5

另外，jquery有.delay（）方法，它比setTimeout更容易使用。

Answer 6

我的按钮

<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>

JQ

$('#upgrade-subscription').click(function () {
    $(this).button('loading');
});

Answer 7

只是放一个小js

onclick="$(this).button('loading');"

带有延迟的jQuery / Twitter Bootstrap数据加载文本按钮

7 个答案: