Question

我已经阅读了很多关于使用模态对话确认提交的内容 - 但我想采取另一种方法。

我想要一个名为'Approve'的按钮，当我点击它时，它会滑出另一个显示'Confirm'的按钮。如果我在5秒左右没有点击它，它会回到'Approve'，否则，如果我在适当的时候点击它，它会执行一个动作。

有没有人曾经这样做过？与使用弹出式窗口或模态或其他东西相反，我实际上想要更改“批准”按钮以说“确认”（也可能是颜色......适当的动画等）。

我对Bootstrap和jQuery很新。

我最接近我想要的是Ladda：http://msurguy.github.io/ladda-bootstrap/

非常感谢任何帮助！

Answer 1

您可以使用jQuery addClass，removeClass来更改按钮的外观以及.val()更改其值

例如，我假设您在默认状态下使用btn-primary，然后在确认状态下将其更改为btn-danger：

$('#btn').click(function(){
    // before check wich action to do
    if ( $(this).hasClass('btn-primary') ){
        // this is the first click
        $(this).removeClass( 'btn-primary' );
        $(this).addClass( 'btn-danger' );
        $(this).val( 'Confirm' );
        var THIS = $(this);
        setTimeout(function(){
            THIS.removeClass( 'btn-danger' );
            THIS.addClass( 'btn-primary' );
            THIS.val( 'Approve' );
        }, 5000);
    }
    if ( $(this).hasClass('btn-danger') ){
        // this is the second/confirmation click
        $(this).removeClass( 'btn-danger' );
        $(this).addClass( 'btn-primary' );
        $(this).val( 'Approve' );

        // do your action
    }
});

如果你正在使用jQueryUI，你可以使用switchClass函数，你也可以得到一个很好的颜色转换:)

Answer 2

@MadScout这个插件帮你排1行！

https://github.com/stefanocudini/bootstrap-confirm-button

HTML：

<a class="btn btn-primary btn-approve-item">Approve</a>

的javascript：

$('.btn-approve-item').confirmButton({msg:"Confirm", timeout: 5000}, function(e) {
    console.log('Approved!');
});

使用jQuery / Bootstrap进行按钮确认

2 个答案: