toastr jQuery消息通知插件文档
来源:互联网 发布:mac 以太网网络修复 编辑:程序博客网 时间:2024/05/20 07:57
简介
Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能!
项目Github主页:https://github.com/CodeSeven/toastr
引用
<span style="font-family:Comic Sans MS;"><link href="toastr.css" rel="stylesheet"/><script src="jquery.js"></script><script src="toastr.js"></script></span>
使用
//显示一个没有标题的信息框(蓝色)toastr.info("I am yanying");
//显示一个没有标题的警告框(橘黄色)toastr.warning("I am yanying");
//显示一个没有标题的成功提示(绿色)toastr.info("I am yanying");
//显示一个没有标题的错误提示(深红色)toastr.error("I am yanying");
//清除一个错误toastr.clear()</span>高级方法
使用这种方法也可以调用通知插件,而且还可以配置一些参数信息,达到不同功能和效果
$(function () { $('#showtoast').click(function () { toastr.options = { closeButton: false, debug: false, progressBar: false, positionClass: "toast-top-right", onclick: null, showDuration: "300", hideDuration: "1000", timeOut: "5000", extendedTimeOut: "1000", showEasing: "swing", hideEasing: "linear", showMethod: "fadeIn", hideMethod: "fadeOut" }; var $toast = toastr['error']('123', 'title'); }); })
可供选择的设置选项
closeButton: true
是否在通知弹窗上面显示关闭按钮,true:显示;false:不显示
debug: true
是否开起debug
progressBar: false
是否显示进度条,当为false时候不显示;当为true时候,显示进度条,当进度条缩短到0时候,消息通知弹窗消失
positionClass: 'toast-top-right'
位置信息,消息弹窗显示的位置,可以显示的位置对应的值
- toast-top-right
- toast-botton-right
- toash-bottom-left
- toast-top-left
- toast-top-full-width 这个是在网页顶端,宽度铺满整个屏幕
- toast-bottom-full-width
- toast-top-center顶端中间
- toast-bottom-center
showDuration: "300"
显示动作(从无到有这个动作)持续的时间
hideDuration: "1000"
隐藏动作持续的时间
timeOut: "5000"
间隔的时间
extendedTimeOut: "1000"
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn"
显示的方式,和jquery相同,可以是show()
hideMethod: "fadeOut"
隐藏的方式,和jquery相同,可以是hide()
toastr['error']('I am yanying', 'title');
其中的error为显示的通知的样式类型,有4种选择
- success 成功,绿色
- info 信息,蓝色
- warning,警告,橙色
- error,错误,深红色
其中第一个参数为显示的内容,第二个参数为显示的标题,标题可以省略
0 0
- toastr jQuery消息通知插件文档
- jquery 通知插件toastr
- jquery通知插件toastr
- Jquery消息提示插件toastr
- Jquery消息提示插件toastr使用详解
- 3、js插件---->jquery通知插件toastr的使用
- 简单好用的消息通知插件toastr
- 消息提示插件:toastr.js
- 项目中用到的一个小插件,基于jQuery的消息提醒 toastr.js
- 基于jquery的消息通知插件
- jquery noty插件 消息通知 01
- toastr 插件使用
- angular toastr插件
- jquery提示通知插件
- 强大的响应式jQuery消息通知框和信息提示框插件
- 强大的响应式jQuery消息通知框和信息提示框插件
- noty – jQuery通知插件
- noty – jQuery通知插件
- RHEL 6.5 SAMBA 安装 + yum 问题
- 番茄工作法
- POJ 1625 Censored! AC自动机 + 动态规划 + 高精度
- Android View绘制过程
- Android Animation
- toastr jQuery消息通知插件文档
- java BufferedImage类操作修改图片
- HTML5触摸事件(touchstart、touchmove和touchend)
- 高性能IO模型浅析
- linux中device->bus_id找不到
- 如何制作自己的网页字体图标
- 客户端跳转与服务器端跳转
- 学习资料
- percona-toolkit的安装及简介