我已经阅读了很多有关使用模态对话框确认提交的内容 - 但我想采取另一种方法。
我想要一个名为“批准”的按钮,当我单击它时,它会滑出到另一个显示“确认”的按钮。如果我在 5 秒左右没有点击它,它会返回“批准”,否则,如果我及时点击它,它会执行一个操作。
以前有人这样做过吗?与使用弹出窗口或模式或其他东西相反,我实际上想将按钮“批准”更改为“确认”(也许还有颜色......适当的动画等)。
我对 Bootstrap 和 jQuery 还很陌生。
我见过的最接近我想要的是Ladda:http://msurguy.github.io/ladda-bootstrap/
非常感谢任何帮助!
最佳答案
您可以使用 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函数,你还可以得到很好的颜色过渡:)
关于jquery - 使用 jQuery/Bootstrap 进行按钮内确认,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20253214/