首页 > 代码库 > toastr 通知提示插件

toastr 通知提示插件

2024-10-04 08:03:02   209人阅读

<style>table.sb-tb td,table.sb-tb th { padding: 5px 10px !important }</style>

jquery toastr 一款轻量级的通知提示框插件。

网页开发中经常会用到提示框，自带的alert样式无法调整，用户体验差。

所以一般通过自定义提示框来实现弹窗提示信息，而jquery toastr正是为此的一款非常棒的插件。

 

开发中用angular比较多，所以笔记记录了angular一些常见使用，与jquery版本有些许不同 ，相差不大。

 

在HTML引用js文件

<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/angular-toastr.css" />
<script type="text/javascript" src="http://www.mamicode.com/angular-toastr.tpls.js"></script>

 

在angular模版中注入依赖

angular.module(‘app‘, [‘ngAnimate‘, ‘toastr‘])

toastr使用中会用到动画，所以需加上ngAnimate，如果不引入ngAnimate，没有动画效果，不影响显示。

 

开始使用

1.成功提示

toastr.success(‘Hello world!‘, ‘Toastr fun!‘);

　　技术分享

2.普通提示

toastr.info(‘We are open today from 10 to 22‘, ‘Information‘);

　　技术分享

3.错误提示

toastr.error(‘Your credentials are gone‘, ‘Error‘);

　　技术分享

4.警告提示

toastr.warning(‘Your computer is about to explode!‘, ‘Warning‘);

　　技术分享

第一个参数为提示内容，第二个参数为提示标题，如果不需要标题，则可省略第二个参数

toastr.success(‘I don\‘t need a title to live‘);

　　技术分享

关闭提示框　　

toastr.clear([toast]);

 

获取当前显示的提示框

toastr.active();

 

刷新打开的提示框（第二个参数配置超时时间）　　

toastr.refreshTimer(toast, 5000);

　　

全局配置

app.config(function(toastrConfig) {
  angular.extend(toastrConfig, {
    autoDismiss: false,
    containerId: ‘toast-container‘,
    maxOpened: 0,    
    newestOnTop: true,
    positionClass: ‘toast-top-right‘,
    preventDuplicates: false,
    preventOpenDuplicates: false,
    target: ‘body‘
  });
});
  • autoDismiss: true 显示最新的toastr
  • containerId: 默认为"toast-container",设置toastr容器的id名称.
  • maxOpened: 页面一次性最多显示多少个toastr.
  • newestOnTop: true 新的toastr会显示在旧的toastr前面
  • positionClass: 设置toastr显示位置的class
  • preventDuplicates: true 重复内容的提示框只出现一次，无论提示框是打开还是关闭
  • preventOpenDuplicates: true 重复内容的提示框在开启时只出现一个 如果当前的提示框已经打开，不会多开。直到提示框关闭后，才可再开)
  • target: 默认为‘body‘, 设置toastr的目标容器
positionClass
toast-top-left 顶端左边
toast-top-right  顶端右边
toast-top-center 顶端中间
toast-top-full-width 顶端中间(宽度铺满)
toast-bottom-right  底部右边
toast-bottom-left  底部左边
toast-bottom-center  底部中间
toast-bottom-full-width 底部中间(宽度铺满)

 

 

app.config(function(toastrConfig) {
  angular.extend(toastrConfig, {
    allowHtml: false,
    closeButton: false,
    closeHtml: ‘<button>×</button>‘,
    extendedTimeOut: 1000,
    iconClasses: {
      error: ‘toast-error‘,
      info: ‘toast-info‘,
      success: ‘toast-success‘,
      warning: ‘toast-warning‘
    },  
    messageClass: ‘toast-message‘,
    onHidden: null,
    onShown: null,
    onTap: null,
    progressBar: false,
    tapToDismiss: true,
    templates: {
	  toast: ‘directives/toast/toast.html‘,
	  progressbar: ‘directives/progressbar/progressbar.html‘
	},
    timeOut: 5000,
    titleClass: ‘toast-title‘,
    toastClass: ‘toast‘
  });
});

　　

  • allowHtml: 设置提示内容可包含html格式
  • closeButton: 设置显示"X" 关闭按钮
  • closeHtml: 自定义html替代closeButton内容，closeButton为true时才显示.
  • extendedTimeOut: 设置当你鼠标滑入后的timeout，该timeout会更新关闭所需的timeout.
  • extraData: 如果重写模版，你可以自定义全局数据给你的toasts
  • iconClasses: 设置各个类型的icon图标class
  • messageClass: 设置toastr提示信息的class
  • progressBar: 设置显示timeout时间进度条
  • tapToDismiss: 设置toastr被点击时关闭
  • templates: 自定义模版
  • timeOut: 设置toastr过多久关闭
  • titleClass: 设置toastr标题的class
  • toastClass: 设置toastr基本的class

 

参考文章：

jquery:  https://github.com/CodeSeven/toastr

angular: https://github.com/Foxandxss/angular-toastr

 

toastr 通知提示插件


联系
我们