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 通知提示插件的更多相关文章

  1. 漂亮灵活设置的jquery通知提示插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  2. 消息提示插件toastr.js与Messenger组件

    Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...

  3. PNotify – 简单易用的 JS 通知,消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  4. Jquery消息提示插件toastr使用详解

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 html <script s ...

  5. Jquery消息提示插件toastr使用

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 相关文件到官网去下载即可 1.引入toastr的js和css文件 <link hre ...

  6. Jquery消息提示插件toastr

    toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...

  7. 应用 CSS3 动画实现12种风格的通知提示

    今天我们想分享几个简单的款式的网站通知效果.有很多的方式来呈现消息给用户:从经典的咆哮般的通知到窗口顶部的通知栏.各个网站的通知样式和效果千篇一律,难得出现创意的通知效果.这里是实现一个应用 CSS3 ...

  8. 使用 Swift 制作一个新闻通知中心插件(1)

    input[type="date"].form-control,.input-group-sm>input[type="date"].input-grou ...

  9. Swift 制作一个新闻通知中心插件1

    使用 Swift 制作一个新闻通知中心插件(1) 随着 iOS 8 的发布,苹果为开发者们开放了很多新的 API,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...

随机推荐

  1. ELK系列~对fluentd参数的理解

    这段时候一直在研究ELK框架,主要集成在对fluentd和nxlog的研究上,国内文章不多,主要看了一下官方的API,配合自己的理解,总结了一下,希望可以帮到刚入行的朋友们! Fluentd(日志收集 ...

  2. 关于 SVN 项目检出

    前几天呢,同事遇到这么一个问题:他新建了一个工作空间,当他通过 svn 检出公司项目的时候,准备过来测试运行,但是呢出现了下面的报错 [ERROR] Failed to execute goal or ...

  3. jQuery的区别:$().click()和$(document).on('click','要选择的元素',function(){})的不同

    jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择 ...

  4. 动态加载js,css(项目中需要的)

    最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...

  5. Cactus

    Cactus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  6. easyui dialog 中嵌入html页面

    最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...

  7. mouseover事件mouseenter事件

    1. mouseover:会在鼠标进入该元素或者该元素的子元素时触发 mouseenter:只在鼠标进入该元素时触发 mouseout:在鼠标移出该元素或则该元素的子元素时触发 mouseleave: ...

  8. 针对数据量较大的表,需要进行跨库复制,采用navcat 实现sqlite数据库跨数据库的数据表迁移 [转载]

    2014年12月13日 14:36 新浪博客 (转自http://www.cnblogs.com/nmj1986/archive/2012/09/17/2688827.html) 需求: 有两个不同的 ...

  9. 全国DNS服务器地址(部分)

    广东: 广东省广州市(中国电信) 首选DNS:61.144.56.100 备份DNS:61.144.56.101 广东省广州市越秀区(中国电信) 首选DNS:202.96.128.86 备份DNS:2 ...

  10. 动态代理:JDK动态代理和CGLIB代理的区别

    代理模式:代理类和被代理类实现共同的接口(或继承),代理类中存有指向被代理类的索引,实际执行时通过调用代理类的方法.实际执行的是被代理类的方法. 而AOP,是通过动态代理实现的. 一.简单来说: JD ...