web-dev-qa-db-ja.com

jQuery / Twitter Bootstrap data-loading-text button with delay

私はこの正確な例を私のウェブサイトで動作させようとしています：

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を実行していて、BootstrapJSファイルをロードしました。

具体的には、ボタンを少し遅れて「読み込み中」のテキスト変更に移動してから、通常のテキストに戻ります。私のグーグルからオンラインで入手できる良い例はないようです（ほとんどは永続的な状態の変更または切り替えを求めています）Bootstrapサイト自体はここのドキュメントに欠けています。

javascriptjquerycsstwitter-bootstrap
58
Michael B

ドキュメントページには、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)
    });
102
msc

または、これを追加して、Twitter Bootstrap属性を選択します。

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

Button（ 'loading'）を実行する前に、受け入れられた回答がjQueryボタンオブジェクトをjs varに変換した方法をメモしてください。これは、jQueryボタンオブジェクトで直接使用するとbutton（ 'loading'）が機能しない。

6
user1837332

bootstrapライブラリを含めるだけです：

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

また、jqueryには.delay（）メソッドがあり、setTimeoutよりも簡単に操作できます。

1
dsd