Toastr 通知提示插件

Toastr 简介

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

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

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

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

在HTML引用js文件

<link rel="stylesheet" type="text/css" href="./static/toastr/toastr.min.css">
<script src="./static/toastr/toastr.min.js"></script>

 注意:导入toastr.min.js文件欠必须要先导入jQuery原生文件

在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);

全局配置

<script type="text/javascript">
 toastr.options = {
        closeButton: false,
        debug: false,
        progressBar: false,
        positionClass: "toast-top-center",
        onclick: null,
        showDuration: "300",
        hideDuration: "1000",
        timeOut: "5000",
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };
</script>

参数名称

说明

可选项

closeButton

是否显示关闭按钮

true,false

debug

是否使用debug模式

true,false

positionClass

弹出窗的位置

具体见下文

showDuration

显示的动画时间

hideDuration

消失的动画时间

timeOut

展现时间

extendedTimeOut

加长展示时间

showEasing

显示时的动画缓冲方式

swing

hideEasing

消失时的动画缓冲方式

linear

showMethod

显示时的动画方式

fadeIn

hideMethod

消失时的动画方式

fadeOut

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

底部中间(宽度铺满)

参考文章:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android sdutio常用快捷键

快捷键 说明 F2 定位到高亮错误或警告的位置 F4 若选中项目,打开 Project ...

18990
来自专栏偏前端工程师的驿站

JS魔法堂:LINK元素深入详解

一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

258100
来自专栏vue学习

27、有赞Vant组件库的引入及轮播图片预览的实现②

这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:

30620
来自专栏xingoo, 一个梦想做发明家的程序员

一分钟教你在博客园中制作自己的动态云球形标签页

经常看到别人的博客里面有动态的云标签页,感觉很是高大上,自己也很像弄一个。于是去找寻源码,在阿里西西页面特效中找到了云标签的源码,经过分析和解剖,弄成了符合博...

38480
来自专栏程序员宝库

Chrome 浏览器必知必会的小技巧

来源:FEWY https://segmentfault.com/a/1190000012143176 说明 这篇文章主要介绍的就是一些chrome浏览器的小技...

49580
来自专栏十月梦想

bootsrap栅格系统

在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏

17940
来自专栏从零开始学 Web 前端

从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

49020
来自专栏我和未来有约会

Silverlight制作scrollbar.

最近要用silverlight开发一个小程序.做了一个scrollbar.其实sl自己带了这个控件,但是如果要样式和自己的程序的风格完全一致的话也是有些难度的....

19870
来自专栏天天

H5(drag,百度地图使用,requestFullscreen,H5应用缓存)

24710
来自专栏韩东吉的Unity杂货铺

零基础入门 13: UGUI Text

前几篇介绍了UGUI里的Image,今天来说下UGUI 的Text,显示文本的组件。因为有了之前代码创建Image的铺垫,所以对Text的使用就都在这篇介绍了。

17020

扫码关注云+社区

领取腾讯云代金券