jQuery / Twitter Bootstrap-Datenladetext-Schaltfläche mit Verzögerung

Ich versuche, genau dieses Beispiel arbeiten auf meiner website:

http://getbootstrap.com/2.3.2/javascript.html#buttons

Aber auch einfach diesen HTML:

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Funktioniert nicht. Ich bin mit jQuery 1.7.x und geladen haben die Bootstrap JS Dateien.

Genau zu sein: ich will den button, um den "laden" - text ändern für eine leichte Verzögerung, dann gehen Sie zurück zu den regulären text. Es scheint nicht zu sein, ein gutes Beispiel sind online verfügbar von meinem Googeln (die meisten Fragen sind für einen dauerhaften Zustand zu ändern oder Umschalten), und der Bootstrap Seite selbst ist, fehlt in der Dokumentation hier.

InformationsquelleAutor der Frage Michael B | 2012-08-25

  1. 101

    In der Dokumentations-Seite, dort gibt es eine Datei, die geladen werden genannt 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)
    });

    InformationsquelleAutor der Antwort msc

  2. 21

    Oder einfach fügen Sie diese, damit es greift das Twitter-Bootstrap-Attribut.

    $('button[data-loading-text]').click(function () {
    $(this).button('loading');
});

    InformationsquelleAutor der Antwort Geoff Wells

  3. 5

    Notieren Sie sich, wie die akzeptierte Antwort umgewandelt jQuery button-Objekt zu einer js-var vor dem ausführen button ("laden") da drauf, das funktioniert zwar, button ("laden") wird nicht funktionieren, wenn es direkt auf die jQuery button-Objekt.

    InformationsquelleAutor der Antwort user1837332

  4. 2

    nur sind die bootstrap-Bibliothek: 

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>

    Dies ist ein Beispiel:

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

    InformationsquelleAutor der Antwort Diego Torres

  5. 1

    auch, jquery .delay() Methode, die vielleicht einfacher zu arbeiten als mit setTimeout.

    InformationsquelleAutor der Antwort dsd

  6. -7

    legen sich lediglich ein kleines js

    onclick="$(this).button('loading');"

    InformationsquelleAutor der Antwort user2397297

Schreibe einen Kommentar