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

我试图得到这个确切的例子在我的网站上工作:

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文件。

具体来说:我希望button移动到“加载”文本的变化稍微延迟,然后回到常规文本。 似乎没有一个很好的例子可以在网上从我的谷歌search(大多数是要求一个永久的状态改变或切换),Bootstrap网站本身缺乏文档在这里。

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

或者只是添加这个,所以它拿起Twitter Bootstrap属性。

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

记下如何接受的答案转换jQuerybutton对象之前运行button('加载'),因为,虽然这个工作,button('加载')将不会工作时,直接使用jQuerybutton对象。

只包括引导库:

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

此外,jQuery的.delay()方法可能比setTimeout更容易工作。

只是把一个小js

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