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

相关文件到官网去下载即可

1、引入toastr的js和css文件

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

2、初始化toastr(此处是自定义)

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

Jquery消息提示插件toastr使用的更多相关文章

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

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

  2. Jquery消息提示插件toastr

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

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

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

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

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

  5. 介绍Web项目中用到的几款JQuery消息提示插件

    第一款 noty 官方网站:https://github.com/needim/noty 第二款 artDialog artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他 ...

  6. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

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

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

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

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

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

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

随机推荐

  1. 【LeetCode234】Palindrome Linked List★

    题目描述: 解题思路: 判断一个单向链表是否是回文链表,并且要求O(n)的时间复杂度和O(1)的空间复杂度. 方法有以下几种: 1.遍历整个链表,将链表每个节点的值记录在数组中,再判断数组是不是一个回 ...

  2. Jmeter 安装后无法启动问题

    问题:按照教程java环境安装完成,也下载了 Jmeter  安装包,但是在启动的时候 dos窗口就一直提示下面的错误信息 ‘findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件.  ...

  3. Linux下的openvpn配置 与 easy-rsa3的证书生成

    #注意:以下操作由服务端操作即可#PS:为什么我找不到var文件??============安装===============wget -O /etc/yum.repos.d/epel.repo ht ...

  4. C# LINQ to XML示例

    static void Main(string[] args)         {    // Create the data source by using a collection initial ...

  5. 《HTTP权威指南》读书笔记:缓存

    缓存的定义 Web缓存是可以自动保存常见文档副本的HTTP设备(包括浏览器?) 缓存的作用 减少冗余数据传输 缓解带宽瓶颈(很多网络为本地网络客户端提供的带宽比为远程服务器提供的带宽要宽) 缓解瞬时拥 ...

  6. NO.3:自学tensorflow之路------MNIST识别,神经网络拓展

    引言 最近自学GRU神经网络,感觉真的不简单.为了能够快速跑完程序,给我的渣渣笔记本(GT650M)也安装了一个GPU版的tensorflow.顺便也更新了版本到了tensorflow-gpu 1.7 ...

  7. 三种迭代Java ArrayList方法及比较

    闲来无事,研究一下Java Collection,首先是ArrayList. 通过三种方式遍历了长度为100000的ArrayList. import java.util.*; public clas ...

  8. PHP密码的六种加密方式

    1. MD5加密 string md5 ( string $str [, bool $raw_output = false ] ) 参数 str  --  原始字符串. raw_output  --  ...

  9. [沈航软工教学] 学生项目Coding地址汇总

    同学们把自己的coding主页链接贴在评论里,要求格式"班号+学号+coding主页链接",如: "1301+13061193 + https://coding.net/ ...

  10. JAVA每日一旅2

    1.关于类型转换 两个数值进行二元操作时,会有如下的转换操作: 如果两个操作数其中有一个是double类型,另一个操作就会转换为double类型. 否则,如果其中一个操作数是float类型,另一个将会 ...