toast通知是根据时间和上下文条件显示在当前应用程序外部的对用户的警告。

jQuery插件的目的是提供一种快速的方法来创建带有倒计时条和平滑滑入/滑出动画的自定义Android风格的吐司通知。

它非常易于使用，可以轻松地在移动网站甚至单页应用程序中使用。

如何使用它:

1.在文档的头部分加载主样式表。

<link rel="stylesheet" href="css/styles.css">

2.为toast通知编写HTML代码。

<div id="toast" class="toast">
  <div class="toast-content">
    <!-- Notification Icon -->
    <i class="icon">
    </i>
    <div class="menssagem">
      <!-- Default Message -->
      <span class="text text-1">sucess</span>
      <span class="text text-2">Salvo com sucesso</span>
    </div>
  </div>
  <!-- Close Button -->
  <i class="icon-close">
    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
  </i>
  <!-- Progress Bar -->
  <div class="progress">
  </div>
</div>

3.在文档末尾加载最新的jQuery JavaScript库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4.toast通知的主要JavaScript。

var toast_notification = {
    // show toast
    show_toast:function ({title, message, time, type}) {
      var container_icon = $('#toast .icon');
      var progress = $('#toast .progress');
      var toast = $('#toast')
      $(toast).addClass('visible');
      $(progress).addClass('visible');
      toast_notification.addMessage(title, message);
      var root = document.documentElement;
      switch (type) {
        case 'success':
          var existMoreone = $(container_icon).find('svg').length;
              if (existMoreone > 0) {
                $(container_icon).find('svg').remove();
              }
              $(container_icon).prepend('<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg>')
              $(toast).addClass('type-success');
              $(toast).removeClass('type-error');
              $(toast).removeClass('type-warning');
  
              break
        case 'error':
              var existMoreone = $(container_icon).find('svg').length;
              if (existMoreone > 0) {
                  $(container_icon).find('svg').remove();
              }
              $(container_icon).prepend('<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg>')
              $(toast).addClass('type-error');
              $(toast).removeClass('type-success');
              $(toast).removeClass('type-warning');
              break
        case 'warning':
              var existMoreone = $(container_icon).find('svg').length;
              if (existMoreone > 0) {
                $(container_icon).find('svg').remove();
              }
              $(container_icon).prepend('<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M228.9 79.9L51.8 403.1C40.6 423.3 55.5 448 78.9 448h354.3c23.3 0 38.2-24.7 27.1-44.9L283.1 79.9c-11.7-21.2-42.5-21.2-54.2 0zM273.6 214L270 336h-28l-3.6-122h35.2zM256 402.4c-10.7 0-19.1-8.1-19.1-18.4s8.4-18.4 19.1-18.4 19.1 8.1 19.1 18.4-8.4 18.4-19.1 18.4z"></path></svg>')
              $(toast).removeClass('type-error');
              $(toast).removeClass('type-success');
              $(toast).addClass('type-warning');
              break
        }
        root.style.setProperty('--time-animation', time+'s');
        var timeNormal = time * 1000;
        var timeWithdoutAnimation = time * 1000 + 300;
        setTimeout(function() {
          $(toast).removeClass('visible');
        }, timeNormal)
        setTimeout(function() {
          $(progress).removeClass('visible');
        },timeWithdoutAnimation)    
    },
    // add toast message
    addMessage: function (titleP, messageP) {
        var title = $('#toast .menssagem .text-1');
       // console.log($(title).text())
        var message = $('#toast .menssagem .text-2');
        $(title).text(titleP);
        $(message).text(messageP);
    },
    // close toast message
    close_toast:function () {
      var progress = $('#toast .progress');
      $('.toast .icon-close').click(function() {
        var taost_atual = $(this).closest('.toast')
        $(taost_atual).removeClass('visible');
        setTimeout(function() {
          $(progress).removeClass('visible');
        },300)
      })
    }
}

5.在页面上显示吐司通知。

// Error Toast
toast_notification.show_toast({
 
  // title
  title: 'Error', 
 
  // toast message
  message: 'Error Message', 
 
  // auto dismiss after 10 seconds
  time: 10, 
 
  // notification type
  type: 'error',
 
});
 
// Success Toast
toast_notification.show_toast({
  title: 'Success', 
  message: 'Success Message', 
  time: 3, 
  type: 'success',
})
 
// Warning Toast
toast_notification.show_toast({
  title: 'Warning', 
  message: 'Warning Message', 
  time: 30, 
  type: 'warning',
})

预览截图

倒计时条和平滑动画创建Toast通知