Customize suas notificações Javascript

Simple e elegante!


Customize suas notificações Javascript

Assim como já mostramos opções de customizar seus alertas aqui , você pode deixar ainda mais interesssante suas notificações com Toastr.

Para usá-lo, existem diversas maneiras, para isso, recomendo você consultar o site do projeto. Mas vamos mostrar um exemplo básico:

  1. Adicione o CSS ao cabeçalho no seu documento HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

Se estiver usando Bootstrap, recomendo inserir essa linha após o CSS do Bootstrap.

  1. Depois adicione o JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

Lembrando que ele utiliza a biblioteca jQuery, logo, é recomendado inserir após o jQuery.

  1. Depois é só criar um exemplo para vê-lo funcionar:
<!DOCTYPE html>
<!--
vim: et ts=2 sw=2 ft=html:
-->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Teste Toastr</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
      $(document).ready( function(){
        $('.my').click( function(){
          toastr.success("Tá funfandoo!");
        } );

      } );
    </script>

  </head>
  <body>
    <button class="my">Clique aqui para exibir a notificação</button>
  </body>
</html>

AVISO: Tive alguns problemas em fazer funcionar com versões recentes de jQuery , por isso usei a versão 1.9.1 como exibido acima, que funcionou de boa!

Existem outros tipos de mensagens tipo:

  • De cor vermelha(e com ícone de erro): toastr.error("Mensagem");
  • De cor amarela(e com ícone de aviso): toastr.warning("Mensagem");
  • De cor verde(e com ícone de ok): toastr.success("Mensagem");

Também é possível customizar o tempo de exibição entre outros, exemplo:

Insira isso no seu código JS

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

Para mais detalhes consulte o demo.


javascript html css desenvolvimentoweb


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!