Подтверждение кнопки с помощью jQuery/Bootstrap

Question

Я много читал, используя Modal Dialogs для подтверждения отправки, но я хотел использовать другой подход.

Я хочу, чтобы у вас была кнопка «Утвердить», и когда я нажимаю на нее, она переходит на другую кнопку, в которой говорится «Подтвердить». Если я не нажму на нее в течение 5 секунд или около того, она вернется к «Одобрить», иначе, если я нажму на нее заблаговременно, она выполнит действие.

Неужели кто-нибудь когда-либо делал это раньше? В отличие от использования popovers или модалов или чего-то еще, я действительно хочу изменить кнопку «Утвердить», чтобы сказать «Подтвердить» (и, возможно, цвет тоже ... соответствующие анимации и т. Д.).

Я довольно новичок в 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, и вы также можете получить хорошую transi 0:

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!'); 
});