web-dev-qa-db-fra.com

jQuery / Twitter Bootstrap bouton de chargement de texte avec délai

J'essaie de faire en sorte que cet exemple fonctionne sur mon site Web:

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

Cependant, en incluant simplement ce code HTML:

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

Ne marche pas. J'exécute jQuery 1.7.x et ai chargé les fichiers Bootstrap JS.

Pour être précis: je veux que le bouton passe au changement de texte "en cours de chargement" avec un léger retard, puis revienne au texte normal. Il ne semble pas y avoir de bon exemple disponible en ligne sur Google (la plupart demandent un changement d'état permanent), et le site Bootstrap lui-même manque de documentation ici.

javascriptjquerycsstwitter-bootstrap
58
Michael B

Dans la page de documentation, un fichier en cours de chargement appelé application.js est en cours de chargement. 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)
    });
102
msc

Ou ajoutez simplement ceci pour qu'il récupère l'attribut Twitter Bootstrap.

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

Notez comment la réponse acceptée a converti l'objet bouton jQuery en une variable js avant d'exécuter le bouton ('chargement') dessus, car, tant que cela fonctionne, le bouton ('chargement') ne fonctionnera pas s'il est utilisé directement sur l'objet bouton jQuery. .

6
user1837332

incluez simplement la bibliothèque bootstrap:

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

Ceci est un exemple:

<!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>
2
Diego Torres

de plus, jquery a la méthode .delay () qui peut être plus facile à utiliser que setTimeout.

1
dsd