JQuery/Twitter Загрузочная текстовая кнопка загрузки с задержкой

Я пытаюсь получить этот точный пример, работающий на моем сайте:

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

Однако, просто включив этот HTML-код:

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

Не работает. Я запускаю jQuery 1.7.x и загрузил файлы Bootstrap JS.

Чтобы быть конкретным: я хочу, чтобы кнопка перемещалась к изменению "загрузки" текста для небольшой задержки, а затем возвращалась к обычному тексту. Кажется, что нет хорошего примера, доступного онлайн из моего Googling (большинство из них просят о постоянном изменении состояния или переключении), а сам сайт Bootstrap отсутствует в документации.

Ответы

Ответ 1

На странице документации загружается файл, называемый 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)
    });

Ответ 2

Или просто добавьте это, чтобы он забирал атрибут Bootstrap Twitter.

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

Ответ 3

Запишите, как принятый ответ преобразовал объект кнопки jQuery в js var перед запуском кнопки ( "загрузка" ) на нем, потому что, хотя это работает, кнопка ( "загрузка" ) не будет работать, если ее использовать непосредственно на Объект кнопки jQuery.

Ответ 4

просто включите библиотеку начальной загрузки:

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

Это пример:

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

Ответ 5

также, jquery имеет метод .delay(), с которым может быть проще работать, чем setTimeout.

Ответ 6

просто поместите небольшой js

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