webentwicklung-frage-antwort-db.com.de

Bootstrap - könnte mir jemand ein Beispiel geben, wie man JS-Buttons einrichtet?

Ich spiele mit Bootstraps stateful buttons - insbesondere mit Loading state, finde aber immer noch nicht die richtigen Einstellungen, damit es funktioniert. Ich habe ein einfaches Formular, das auf AJAX basiert, etwa so:

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

Wenn ich jedoch auf die Schaltfläche POST klicke, wird das Formular zwar gesendet, der Button-Effekt (loading stuff ...) wird jedoch nicht angezeigt, wie im Beispiel auf der Bootstrap-Seite.

Könnte mir jemand einen Tipp geben, wie ich es reparieren kann?

20
user984621

Sie müssen explizit festlegen, dass sich die Schaltfläche im Ladezustand befindet. Etwas wie das:

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

Ich habe ein funktionierendes JSFiddle-Beispiel erstellt.

39
mmcnickle

In der Bootstrap-Dokumentation gab die erste Erwähnung von Stateful-Buttons den Eindruck, dass alles, was ich zum Aktivieren des Stateful-Buttons brauche, das data-loading-text-Attribut ist:

Fügen Sie data-loading-text="Loading..." hinzu, um einen Ladestatus für eine Schaltfläche zu verwenden.

Wenn Sie nach diesem Verhalten suchen (und davon ausgehen, dass es mit submit, input type="submit" usw. funktioniert), sollte dieser jQuery-Selektor den Trick für Sie tun:

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

Sie müssen jedoch Ihr gewünschtes Verhalten immer noch über einen Event-Handler wie .click() hinzufügen. Dies ist die jQuery für den Stateful-Button in der Dokumentation (suchen Sie in dieser Javascript-Datei nach "fat-btn"):

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

Zusammenfassend können wir das tun:

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

Ich habe eine Arbeitsumgebung unter http://jsfiddle.net/jhfrench/n7n4w/ .

4
Jeromy French

Sie brauchen keine bootstrap-buttons.js. Das ist HTM5, verwenden Sie die benutzerdefinierten Attribute. Dieses Beispiel hängt nicht vom Klickereignis ab. Es handelt sich um ein Formular, das gesendet wird

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