jQuery Bootstrap - 谁能给我任何例子，如何设置 JS 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9486231/
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
Bootstrap - could anyone give me any example, how to set up JS buttons?
提问by user984621
I am playing with Bootstrap's stateful buttons- specifically with Loading state, but still can't find the right set up to get it working. I have a simple form based on AJAX, something like that:
我正在使用 Bootstrap 的有状态按钮- 特别是Loading state，但仍然找不到正确的设置来让它工作。我有一个基于 AJAX 的简单表单，类似于：
<%=form_tag '/comments', :remote => true do %>
<div><%=text_area_tag 'comment[text_comment]'%></div>
<div><button class="btn btn-primary" data-loading-text="loading stuff..." >Post</button></div>
<%end%>
But still when I click on the POSTbutton, so the form is sending, but the button effect (loading stuff...) is not displayed, like the example on Bootstrap's page.
但是当我点击POST按钮时，表单正在发送，但按钮效果（加载内容...）没有显示，就像 Bootstrap 页面上的示例一样。
Could anyone gives me a tip on how to fix it?
谁能给我一个关于如何修复它的提示？
回答by mmcnickle
You need to explicitly set that the button is in the loading state. Something like this:
您需要明确设置按钮处于加载状态。像这样的东西：
// Set up the buttons
$(button).button();
$(button).click(function() {
$(this).button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
// $(this).button('reset');
}
I've created a working JSFiddle example.
我创建了一个有效的JSFiddle 示例。
回答by Jeromy French
In the Bootstrap documentation, the first mention of stateful buttonsgave me the impression that all I need to enable the stateful button is to provide the data-loading-textattribute:
在 Bootstrap 文档中，第一次提到有状态按钮给我的印象是，启用有状态按钮所需的只是提供data-loading-text属性：
Add
data-loading-text="Loading..."to use a loading state on a button.
添加
data-loading-text="Loading..."以在按钮上使用加载状态。
If you are looking for this behaviour (and also expect it to work on submit, input type="submit", etc), this jQuery selector should do the trick for you:
如果你正在寻找这种行为（也期望它的工作的submit，input type="submit"等等），这个jQuery选择应该为你做的伎俩：
$(':input[data-loading-text]')
But you'll still need to attach your desired behaviour through an event handler, like .click(). This is the jQuery for the stateful button in the documentation(look for "fat-btn" in that javascript file):
但是您仍然需要通过事件处理程序附加您想要的行为，例如.click(). 这是文档中状态按钮的 jQuery（在该 javascript 文件中查找“fat-btn”）：
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
So, putting that all together, we can do this:
所以，把所有这些放在一起，我们可以这样做：
$(':input[data-loading-text]').click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
I have a working jsfiddle at http://jsfiddle.net/jhfrench/n7n4w/.
回答by harveyt
You don't need bootstrap-buttons.js. That's is HTM5, use the custom attributes. This sample does not depends of click event, it is a form submit
你不需要 bootstrap-buttons.js。那是 HTM5，使用自定义属性。此示例不依赖于单击事件，它是一个表单提交
var btn = $(this).find("input[type=submit]:focus");
// loading
var loadingText = btn.data('loadingText');
if (typeof loadingText != 'undefined') {
btn.attr("value", loadingText);
}
else {
btn.attr("value", "Loading...");
}
btn.attr("disabled", true);
$.ajax({// long task
complete: function () {
// reset.. the same
});
