Javascript 带有延迟的 jQuery / Twitter Bootstrap 数据加载文本按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12118202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery / Twitter Bootstrap data-loading-text button with delay
提问by Michael B
I'm trying to get this exact example working on my website:
我试图让这个确切的例子在我的网站上工作：
http://getbootstrap.com/2.3.2/javascript.html#buttons
http://getbootstrap.com/2.3.2/javascript.html#buttons
However, simply including this HTML:
但是，只需包含此 HTML：
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
Does not work. I'm running jQuery 1.7.x and have loaded the Bootstrap JS files.
不起作用。我正在运行 jQuery 1.7.x 并加载了 Bootstrap JS 文件。
To be specific: I want the button to move to the "loading" text change for a slight delay, then go back to the regular text. There doesn't seem to be a good example available online from my Googling (most are asking for a permanent state change or toggle), and the Bootstrap site itself is lacking in documentation here.
具体来说：我希望按钮稍微延迟移动到“加载”文本更改，然后返回到常规文本。我的谷歌搜索似乎没有一个很好的在线示例（大多数都要求永久状态更改或切换），并且 Bootstrap 站点本身缺少此处的文档。
回答by msc
In the documentation page, there is a file being loaded called application.js. http://twitter.github.com/bootstrap/assets/js/application.js
在文档页面中，加载了一个名为 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)
});
回答by Geoff Wells
Or just add this so it picks up the Twitter Bootstrap attribute.
或者只是添加它以便它选择 Twitter Bootstrap 属性。
$('button[data-loading-text]').click(function () {
$(this).button('loading');
});
回答by user1837332
Make a note of how the accepted answer converted the jQuery button object to a js var before running button('loading') on it because, while this works, button('loading') will not work when used directly on the jQuery button object.
在运行 button('loading') 之前，记下接受的答案是如何将 jQuery 按钮对象转换为 js var 的，因为虽然这有效，但当直接在 jQuery 按钮对象上使用时 button('loading') 将不起作用.
回答by Diego Torres
just include the bootstrap library:
只需包含引导程序库：
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
This is an example:
这是一个例子：
<!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>
回答by dsd
also, jquery has .delay() method which may be easier to work with than setTimeout.
此外，jquery 有 .delay() 方法，它可能比 setTimeout 更容易使用。
回答by Manoj
My Button
我的按钮
<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');
});
回答by user2397297
just put a small js
放个小js就行
onclick="$(this).button('loading');"
