toastr 通知提示插件

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

 

转载于:https://www.cnblogs.com/kenz520/p/6964904.html