toastr 通知提示插件

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

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

 

toastr 通知提示插件

原文地址:http://www.cnblogs.com/kenz520/p/6964904.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注