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. vi 格式配置

    echo set cursorline >>.vimrcecho set ic >>.vimrcecho set nu >>.vimrc

  2. Feeling_2018_5_22

    “我打你,你会走吗?”    “不会!!” “我骂你,你会走吗?”    “不会!!” “那我不爱你了,你会走吗?”       “会.”

  3. 大数据入门第十四天——Hbase详解(三)hbase基本原理与MR操作Hbase

    一.基本原理 1.hbase的位置 上图描述了Hadoop 2.0生态系统中的各层结构.其中HBase位于结构化存储层,HDFS为HBase提供了高可靠性的底层存储支持, MapReduce为HBas ...

  4. Gitlab+Jenkins学习之路(十四)之自动化脚本部署实践

    目录 一.环境说明和准备 1.环境说明 2.服务器准备工作 二.发布脚本编写 1.自动化部署流程设计 2.自动化部署脚本编写 三.发布测试 1.开发机和github添加ssh信任 2.克隆项目到开发机 ...

  5. angularJs 技巧总结及最佳实践

    强烈建议通读官方wiki文档,里面包含了FAQ,最佳实践,深入理解最核心的Directive及Scope等文章, 基础 1. 使用ng-repeat指令,为防止重复值发生的错误.加上track by ...

  6. AngularJS 的异步服务测试与Mocking

    测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...

  7. Centos 7 部署Kubernetes(K8S)集群

    资源链接:https://pan.baidu.com/s/1-PT_QQAf7cTu_znX-S-r9Q 密码:33sr 转发:http://blog.51cto.com/lizhenliang/19 ...

  8. Docker部署Zookeeper容器

    获取zookeeper镜像 docker pull zookeeper 创建zookeeper容器 docker run --name="zookeeper" -p 2181:21 ...

  9. Jupyter Notebook 工作空间 / 默认路径 的设置方式

    Jupyter notebook 安装后,启动后,默认的工作空间是当前用户目录.为了方便对文档进行管理,往往需要自行设置工作空间. 下面介绍两种亲试有效的工作空间设置方法. 1.修改快捷方式 对 Ju ...

  10. Python中 list, numpy.array, torch.Tensor 格式相互转化

    1.1 list 转 numpy ndarray = np.array(list) 1.2 numpy 转 list list = ndarray.tolist() 2.1 list 转 torch. ...