Jquery消息提示插件toastr使用详解
toastr是一个基于jQuery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。
1、使用很简单,首选引入toastr的js、css文件
html
<script src="<%=path%>/res/toastr/toastr.min.js"></script> <link rel="stylesheet" href="<%=path%>/res/toastr/toastr.min.css">
2、效果
3、集成使用
//常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!");
//成功消息提示,默认背景为浅绿色
toastr.success("你有新消息了!");
//警告消息提示,默认背景为橘黄色
toastr.warning("你有新消息了!");
//错误消息提示,默认背景为浅红色
toastr.error("你有新消息了!");
//带标题的消息框
toastr.success("你有新消息了!","消息提示");
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");
4、自定义用法
通过设置自定义参数,可达到不同的效果
自定义参数:
JavaScript
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相同
转载于:https://www.cnblogs.com/telwanggs/p/7205698.html
Jquery消息提示插件toastr使用详解相关推荐
- SpringCloud工作笔记059---Jquery消息提示插件toastr使用详解
JAVA技术交流QQ群:170933152 toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.c ...
- python测试开发django-128.Jquery消息提示插件toastr使用
前言 toastr.js是一个基于jQuery的非阻塞.简单.漂亮的消息提示插件,使用简单.方便.可以通过设置参数来设置提示窗口显示的位置.显示的动画等. toastr.js可以设置四种提示样式: 成 ...
- Jquery消息提示插件toastr
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...
- 一款轻量级的消息提示插件 —— toastr
toastr是一款轻量级的消息提示插件,基于JQuery,使用简单方便,外观大气漂亮. 点击这里进入toastr在线调试使用 点击这里进入toastr官方网站 使用效果如下图所示: 插件使用需要引用的 ...
- JQuery上传插件Uploadify使用详解
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
- JQuery上传插件Uploadify使用详解 http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
- Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
- php tip,jQuery tip提示插件详解
本文主要介绍了jQuery tip提示插件的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 效果图: 代码如下: document .tip{ width: 200px; ...
- jquery.uploadify php,jquery插件uploadify使用详解
这次给大家带来jquery插件uploadify使用详解,jquery插件uploadify使用的注意事项有哪些,下面就是实战案例,一起来看一下. 有时项目中需要一个文件批量上传功能时,个人认为upl ...
最新文章
- java linux mysql数据库_Linux Java连接MySQL数据库
- idea springboot jrebel hotreloaded
- C语言实例第4期:交换数组中最大数和最小数的位置
- C# 读取TXT文本数据 添加到数据库
- sessionbean entitybean 区别
- php ajax无刷新分页源码,ajax实现无刷新分页(php)
- azkaban的操作指南
- 错误: 非法的表达式开始_虽然这两个C语言宏定义很简单,但是能在程序运行前找到错误代码...
- 常用的loss函数,以及在训练中的使用
- C#-WebForm-★★★JQuery知识——基础知识、选择器、事件★★★
- Git:错误:error:src refspec master does not match any
- C#判断对象是不是数组
- 从开锁到中年危机的杂谈
- Nginx是如何处理一个HTTP请求的
- 2010年11月30日
- ps粘贴图片模糊怎么破
- 普通键盘Windows上虚拟Cherry机械键盘效果的方法
- 2021-03-26 大数据技术对企业管理的影响和应用前景分析
- 字母和数字符号的ASCII码对照表转
- firefox os : firefox os vs android
热门文章
- (23)FPGA锁存器与缓冲器的区别
- System verilog随机系统函数$urandom使用方法
- (2)verilog语言编写打两拍
- 基于FPGA实现SDI转Camera Link接口
- android qt 串口通信,Qt串口通信开发之QSerialPort模块详细使用方法与实例
- linux清除硬盘,linux下清除硬盘的几种方法
- ureport2 mysql_Ureport2 安装,配置及问题详解
- jquery 逗号分割截取字符串_JS/JQUERY字符串截取分割匹配等处理汇总
- 构建安全的计算机网络报告,计算机网络与安全实践设计报告 矿大资料.doc
- JavaScript重难点解析5(对象高级、浏览器内核与事件循环模型(js异步机制))