Bootstrap - 谁能给我任何例子，如何设置 JS 按钮？答案

【问题标题】：Bootstrap - could anyone give me any example, how to set up JS buttons?Bootstrap - 谁能给我任何例子，如何设置 JS 按钮？
【发布时间】：2015-11-21 22:10:32
【问题描述】：

我正在使用 Bootstrap 的 stateful buttons - 特别是 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%>

但是当我点击 POST 按钮时，表单正在发送，但是按钮效果（正在加载东西...）没有显示，就像Bootstrap 页面上的示例。

谁能告诉我如何解决它？

【问题讨论】：

标签： jquery css ruby-on-rails-3 button twitter-bootstrap

【解决方案1】：

您需要明确设置按钮处于加载状态。像这样的：

// 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');
}

我创建了一个有效的JSFiddle example。

【讨论】：

谢谢你的例子，但是天哪......我不知道，我做错了什么......当我尝试这个例子时，你放在 JSFiddle 上并放入函数警报中，所以显示警报消息，但文本 正在加载 按钮没有...我已加载的所有 Bootstrap 文件...

【解决方案2】：

在 Bootstrap 文档中，the first mention of stateful buttons 给我的印象是启用有状态按钮所需要做的就是提供 data-loading-text 属性：

添加data-loading-text="Loading..." 以在按钮上使用加载状态。

如果您正在寻找这种行为（并希望它适用于 submit、input type="submit" 等），这个 jQuery 选择器应该可以为您解决问题：

$(':input[data-loading-text]')

但是您仍然需要通过事件处理程序附加您想要的行为，例如.click()。这是the jQuery for the stateful button in the documentation（在那个 javascript 文件中查找“fat-btn”）：

.click(function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
        btn.button('reset')
    }, 3000)
})

所以，把所有这些放在一起，我们可以这样做：

$(':input[data-loading-text]').click(function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
        btn.button('reset')
    }, 3000)
})

我有一个working jsfiddle at http://jsfiddle.net/jhfrench/n7n4w/。

【讨论】：

很好的解决方案！我继承的代码包括锚标记和输入按钮的混合，所以我的 JQuery 选择语句只是“[data-loading-text]”。此外，为了符合标准和清晰，请在行尾添加分号。
@wloescher：不包括分号只是因为我从 Bootstrap 的代码中逐字复制了代码。一些 linter 会抱怨“多余的”分号，所以我猜这就是为什么它们不包括它们。出于与您建议的相同原因，我将它们放在自己的代码中。
@wloescher：PS--考虑使用这个选择器：$('a, :input').find('[data-loading-text]')...

【解决方案3】：

您不需要 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
});

【讨论】：