如何设置bootstrap加载按钮的标题?

时间:2017-07-11 11:58:42

标签: jquery twitter-bootstrap button

我有以下代码:

            var submit_button = $(t.find(":submit"));
            submit_button.button("loading");

我希望按钮的标题是“请稍候......”,但我怎样才能实现这一目标? 如果我在上述调用之前设置了“text”或“html”,标题将重置为“loading”。

这是解决方案 - 由Nimish Gupta提供:

var submit_button = $(t.find(":submit"));
submit_button.attr('data-loading-text', "Please wait...");
submit_button.button("loading");

2 个答案:

答案 0 :(得分:1)

您可以将data-loading-text="Loading..."与js代码一起添加到提交按钮

$("form").on("submit", function(){
    $(this).find(':submit').button("loading...");
})

答案 1 :(得分:0)

你可以简单地使用ladda bootstrap按钮。

HTML:

<a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">Submit</span></a>

$(document).ready(function(){
Ladda.bind( 'input[type=submit]' );
});

$(function() {
    $('#form-submit').click(function(e){
        e.preventDefault();
        var l = Ladda.create(this);
        l.start();
        $.post("your-url", 
            { data : data },
          function(response){
            console.log(response);
          }, "json")
        .always(function() { l.stop(); });
        return false;
    });
});

它会在按钮旁边显示一个装载程序。

详情请见:https://msurguy.github.io/ladda-bootstrap/