Bootstrap Confirm
O Bootstrap Confirm é um componente para interface que permite gerar pop-ups de confirmação de forma simples, rápida e elegante. Ele transforma um link em um botão de confirmação apresentando botões de confirmação e cancelamento. O botão de cancelamento, cancela a requisição e fecha a janela, o botão de confirmação redireciona o usuário para o endereço do link.O autor é o EThaiZone e o componente pode ser baixado no link abaixo:
http://ethaizone.github.io/Bootstrap-Confirmation/
Esse componente possui toda a documentação e exemplos no site, porém ele só funciona no Bootstrap 2, foi feito um fork do projeto pelo Tavicu para funcionar no Bootstrap 3. O procedimento é o mesmo, só o script do bootstrap confirmation deve ser baixado do link abaixo:
https://github.com/Tavicu/bootstrap-confirmation/
Veja na imagem abaixo como são apresentadas as mensagens de confirmação:
Podemos ver a pop-up de confirmação sendo exibida de diversas formas
Seu uso é bastante simples e precisamos somente incluir a referência do script "bootstrap-confirmation.js" depois dos scripts do Jquery e Bootstrap. Depois disso, basta decorar os links onde quisermos incluir a confirmação e chamar um javascript para carregar as janelas.
Exemplo:
Vamos ver de exemplo o botão excluir de uma tela de projetos, veja os elementos:
Botão
<a href="/Projeto/Delete/1" class="btn btn-outline btn-danger" title="Deseja realmente excluir o projeto?" data-toggle="confirmation" data-singleton="true" data-popout="true"><i class="fa fa-trash-o fa-fw" title="Excluir o projeto"></i></a>
Os campos em negrito são as configurações para o componente. Esse botão será exibido somente como um ícone e quando clicado vai exibir a janela de confirmação.
Botões na tela
Tela de confirmação
Atenção: O title do link será usado para o texto da confirmação, caso queira continuar a exibir um hint no botão antes dele ser clicado como aparece na imagem é necessário usar o title de algum elemento dentro do botão, no exemplo acima incluímos o title dentro da imagem do ícone.
Script
$('[data-toggle="confirmation"]').confirmation({ btnOkLabel: " Sim", btnCancelLabel: " Não" });
Atenção: O texto dos botões por padrão é "Yes" e "No", só por script funciona a alteração do texto dos botões. Isso é importante pois se alterarmos direto o script teremos dificuldade em aplicar globalização nos controles, com isso podemos trocar a linguagem dos botões sem preocupações.
Mãos a obra
Veja no fiddle como fica na vera esse componente e teste as opções do componente.
Conclusão
Esse é um componente bastante legal e fácil de ser usado. Esse é visualmente agradável e bastante intuitivo. Também se ajusta a qualquer template do bootstrap que esteja usando. Vale a pena ver e conhecer.
Agradeço a atenção e espero que tenham se divertido.
Atenciosamente,
Erick Ferreira Marques da Silva
Erick Ferreira Marques da Silva
Nenhum comentário:
Postar um comentário