一款轻量级的消息提示插件 —— toastr
toastr是一款轻量级的消息提示插件,基于JQuery,使用简单方便,外观大气漂亮。
点击这里进入toastr在线调试使用
点击这里进入toastr官方网站
使用效果如下图所示:
插件使用需要引用的JS和CSS文件如下图所示:
各版本JQuery:
jquery-3.3.1.min.js
toastr文件:
toastr.min.js
toastr.min.css
使用说明:
插件有四种消息类型,分别如下图所示:
toastr.info("您的手机已经欠费!", "系统提醒");//提醒toastr.success("恭喜获得冠军!", "恭喜");//成功toastr.warning("您已经严重超速!", "警告");//警告toastr.error("系统崩溃!", "错误");//错误
格式:
toastr.消息类型("消息内容","消息标题,可以省略")
实现代码:
<script type="text/javascript">var toastr;toastr.options = {closeButton: true,//显示关闭按钮debug: false,progressBar: true,//显示进度条positionClass: "toast-bottom-center",//位置onclick: null,//点击消息框自定义事件showDuration: "300",//显示动作时间hideDuration: "1000",//隐藏动作时间timeOut: "2000",//显示时间,0为永久显示extendedTimeOut: "1000",//鼠标移动过后显示显示时间showEasing: "swing",hideEasing: "linear",showMethod: "fadeIn",//显示方式hideMethod: "fadeOut"//隐藏方式};$("#button1").click(function () {toastr.info("您的手机已经欠费!", "系统提醒");//提醒});$("#button2").click(function(){toastr.success("恭喜获得冠军!", "恭喜");//成功});$("#button3").click(function () {toastr.warning("您已经严重超速!", "警告");//警告});$("#button4").click(function () {toastr.error("系统崩溃!", "错误");//错误});$("#button6").click(function () {toastr.clear();//移除所有,有动画效果})$("#button7").click(function () {toastr.remove();//移除所有,没有动画效果})</script>
参数说明:
参数 | 说明 |
closeButton | 显示关闭按钮 |
debug | 开启debug模式 |
progressBar | 显示进度条 |
onclick | 鼠标点击事件 |
showDuration | 显示动作时间 |
hideDuration | 隐藏动作时间 |
timeOut | 显示时间,0为永久显示 |
extendedTimeOut | 鼠标移动过后显示显示时间 |
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 |
一款轻量级的消息提示插件 —— toastr相关推荐
- Jquery消息提示插件toastr使用详解
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 html <script ...
- SpringCloud工作笔记059---Jquery消息提示插件toastr使用详解
JAVA技术交流QQ群:170933152 toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.c ...
- 一款优雅的消息提示插件Message.js
Message.js 插件描述: 一款优雅的原生JS页面消息提示插件,兼容性良好,无任何依赖. Git: Gitee | GitHub 插件预览:Message.js 声明: 此插件非笔者原创,笔者只 ...
- python测试开发django-128.Jquery消息提示插件toastr使用
前言 toastr.js是一个基于jQuery的非阻塞.简单.漂亮的消息提示插件,使用简单.方便.可以通过设置参数来设置提示窗口显示的位置.显示的动画等. toastr.js可以设置四种提示样式: 成 ...
- Jquery消息提示插件toastr
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...
- 最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
- 推荐一款IDEA 快捷键 自动提示插件
小伙,你使用快捷键进行操作的时候,是帅啊!但是,你给别人演示的时候,别人可能根本不知道你进行了什么快捷键操作.这个时候 Presentation Assistant 这个插件就站出来了! Presen ...
- Toastr消息提示框的使用
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script type=& ...
- html数字变换插件,轻量级jquery数字动画插件
jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...
最新文章
- elasticsearch mapping之index
- Oracle监听器—静态注册
- Floyd Warshall算法
- 整型和浮点型之间的转化
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目(Windows平台)...
- PostgreSQL数据库配置网络访问
- 事业单位考试考试【转载】
- JZOJ 1238. 自行车比赛
- sqlite数据库读写在linux下的权限问题
- php mysql delimiter,MySql delimiter的作用是什么_MySQL
- mybatis关联查询resultmap的使用详解resultmap
- ITIL 4 讲解:事件管理 (Incident Management)
- 如何强制解锁或删除被占用的文件或文件夹 - ForceDelete绿色强制文件删除工具
- Android_CTF: kgb_messenger
- Beaglebone Black–GPIO 高低电平控制 LED 灯
- 在Word中撰写论文插入MathType公式,使得公式居中编号右对齐教程
- FE!FE!面板固定效应模型:你用对了吗
- vue3之axios配置(阿飞)
- Android TV-电视开发常用知识点讲解
- Word文档在线整篇翻译
热门文章
- 2.7-源码编译安装
- 多域名解析到同一网站C的php重定向代码
- VMware vCloud® Suite 5.5功能介绍
- 域控制器的强制卸载,Active Directory系列之十四
- php 参数 只用一次,php中,用函数,如果有很多个参数,只使用最后一个参数,有什么优雅的写法?...
- Spring中引入其他配置文件
- android5.1 sdk version,java - Android SDK version 23.6 - Stack Overflow
- python redis 消息队列_Python的Flask框架应用调用Redis队列数据的方法
- php数组验证用户名密码,求个php数组验证问题,在线等
- redis 值字符串前面部分乱码_redis key乱码