Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能!

toastr是一个基于Jquery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。

cdn最新的:

http://www.bootcdn.cn/toastr.js/

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

参考:

http://blog.csdn.net/cyh1111/article/details/53141037

1,集成使用:

//常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!"); //成功消息提示,默认背景为浅绿色
toastr.success("你有新消息了!"); //警告消息提示,默认背景为橘黄色
toastr.warning("你有新消息了!"); //错误消息提示,默认背景为浅红色
toastr.error("你有新消息了!"); //带标题的消息框
toastr.success("你有新消息了!","消息提示"); //另一种调用方法
toastr["info"]("你有新消息了!","消息提示");

2,自定义用法:

toastr.options = {
closeButton: false,
debug: false,
progressBar: true,
positionClass: "toast-bottom-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "2000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};

参数说明: 
closeButton:false,是否显示关闭按钮(提示框右上角关闭按钮); 
debug:false,是否为调试; 
progressBar:false,是否显示进度条(设置关闭的超时时间进度条); 
positionClass,消息框在页面显示的位置

toast-top-left  顶端左边
toast-top-right 顶端右边
toast-top-center 顶端中间
toast-top-full-width 顶端,宽度铺满整个屏幕
toast-botton-right
toast-bottom-left
toast-bottom-center
toast-bottom-full-width

onclick,点击消息框自定义事件 
showDuration: “300”,显示动作时间 
hideDuration: “1000”,隐藏动作时间 
timeOut: “2000”,自动关闭超时时间 
extendedTimeOut: “1000” 
showEasing: “swing”, 
hideEasing: “linear”, 
showMethod: “fadeIn” 显示的方式,和jquery相同 
hideMethod: “fadeOut” 隐藏的方式,和jquery相同

消息提示插件toastr.js与Messenger组件的更多相关文章

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

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

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

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

  3. Jquery消息提示插件toastr

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

  4. 基于jquery的消息提示框toastr.js

    //消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...

  5. 【源码解读】js原生消息提示插件

    效果如下: 关闭message后前后message的衔接非常丝滑,这部分是我比较感兴趣的.带着这个问题先了解下DOM结构,顺便整理下作者的思路. 从DOM里我们可以看到所有的message都在一个容器 ...

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

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

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

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

  8. 仿网易邮箱5.0(四):信息提示插件(tips.js)

    信息提示插件,在平常的开发中也是经常乃至的一个插件,像是一些辅助信息的提示,如:加载成功.提交信息成功或失败等等.这个插件在163邮箱中用在切换标签时提示加载状态. 下面我们先来分析一下这个小插件需要 ...

  9. 基于jquery的tips悬浮消息提示插件tipso

    <a href="javascript:;" class="disabled" data-tipso="Tips" id=" ...

随机推荐

  1. MySQL Plugin 'InnoDB' init function returned error

    . . 在MySQL的配置文件中,设定default-table-type=InnoDB,发现MySQL无法正常的启动,错误日志中给出了如下的信息: 150210 18:11:19 mysqld_sa ...

  2. 搭建Solr集群的推荐方案

    之前介绍过2篇SolrCloud的部署流程,第一个是使用安装脚本的方式进行抽取安装,启动比较方便,但是会创建多个目录,感觉比较乱:第二个是官方教程上提供的方法,使用比较简单,直接释放压缩包即可,并且启 ...

  3. perl运行其他程序的5种方法

    1.使用system函数 运行成功,返回0,运行失败则返回非负整数 system("cmd"); 2.使用qx my $cmd1=qx/date/; 3.使用`` 与qx等效 4. ...

  4. pthread_cond_wait的原子性

    使用的基本模板如下(参考APUE): signal代码序列如下, pthread_mutex_lock ... pthread_cond_signal pthread_mutex_unlock   w ...

  5. 头文件algorithm中的常用函数

    非修改性序列操作(12个) 循环         对序列中的每个元素执行某操作         for_each() 查找         在序列中找出某个值的第一次出现的位置         fin ...

  6. STL:原地归并排序模板(InplaceMergeSort)

    原理:就是在归并排序上改进,以时间复杂度换空间复杂度,利用元素反转完成排序 具体过程如下: 具体操作看代码吧,应该没什么难度,主要是reverse要反转三次 typedef int Position; ...

  7. Ubuntu jsp平台使用JDBC来连接MySQL数据库

    Ubuntu 7.04 搭建Ubuntu jsp平台开发环境MySQL+tomcat+apache+j2sdk1.6在所有安装开始前先在Terminal中输入 rpm -q -a查看是否安装过rpm ...

  8. div+css进度条

    效果图: 进度条代码: <style type="text/css"> 红色:background-color:f05153:border:1px solid #f05 ...

  9. HDU 5894 hannnnah_j’s Biological Test (组合数学) -2016 ICPC沈阳赛区网络赛

    题目链接 #include <map> #include <queue> #include <math.h> #include <stdio.h> #i ...

  10. 网站上点击自定义按钮发起QQ聊天的解决方案

    一.背景 最近由于开发需要,需要在网站上自定义一个立即交谈的按钮,现将解决方式分享给大家. 二.解决方案 1.首先访问:http://shang.qq.com/widget/consult.php,适 ...