web-dev-qa-db-ja.com

Bootstrap-JSボタンの設定方法など、例を挙げてもらえませんか？

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

[〜＃〜] post [〜＃〜]ボタンをクリックしても、フォームは送信されますが、ボタンの効果（loading stuff ...）は、Bootstrapのページの例のように表示されません。

誰かが私にそれを修正する方法のヒントを教えてもらえますか？

jquerycssruby-on-rails-3buttontwitter-bootstrap
20
user984621

ボタンがロード状態であることを明示的に設定する必要があります。このようなもの：

// 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の例 を作成しました。

39
mmcnickle

Bootstrapのドキュメントで、 ステートフルボタンの最初の言及 は、ステートフルボタンを有効にするために必要なのは_data-loading-text_属性を提供することだけであるという印象を与えました：

_data-loading-text="Loading..."_を追加して、ボタンの読み込み状態を使用します。

この動作を探している場合（およびsubmit、_input type="submit"_などでも機能することが期待されている場合）、このjQueryセレクターでうまくいくはずです。

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

ただし、.click()などのイベントハンドラーを使用して、目的の動作をアタッチする必要があります。これは ドキュメントのステートフルボタンのjQuery （その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)
})
_

私は http://jsfiddle.net/jhfrench/n7n4w/でjsfiddleが機能している を持っています。

4
Jeromy French

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
});
0
harveyt