toastr 通知提示插件

Posted 2020-09-22 @ 以乐之名

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

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

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

 

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

 

在html引用js文件

<link rel="stylesheet" type="text/css" href="angular-toastr.css" />
<script type="text/javascript" src="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