toastr.js 便捷弹框怎么用?怎么本地化?
〇、简介
toastr.js 是一个非常简洁的弹窗消息插件,主要原因就是其脚本和样式文件较小。
并且可以根据自己的需求,修改样式文件,可以应用在多种不同的场景。
https://codeseven.github.io/toastr/
https://github.com/CodeSeven/toastr
一、准备工作
调用 toastr 插件之前需要先引入三个文件:
jquery.js、toastr.js、toastr.css。
例如,可以通过 CDN 导入:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
二、简单使用
引入后,可以简单的通过 toastr.xxx 直接调用,按照提示类型选择对应的弹框即可。例如:
注:第二个参数是标题,样式可以修改,下文会介绍。
toastr.info("请阅读当前提示信息!")
toastr.info("请阅读当前提示信息!","信息")
toastr.success("恭喜,操作成功了!")
toastr.success("恭喜,操作成功了!", "成功")
toastr.warning("注意,这是一条警告信息!")
toastr.warning("注意,这是一条警告信息!", "警告")
toastr.error("操作失败了!");
toastr.error("操作失败了!", "失败");
// toastr.clear();// 移除所有,有动画效果
// toastr.remove();// 移除所有,没有动画效果
弹窗模样:
注:鼠标锁定焦点时,颜色会加重,如下带标题的成功弹框。
三、进阶使用
可以通过修改样式文件 toastr.css 来定制弹框的样式。
示例 1:修改弹窗的颜色、标题的样式
如下图中的位置,可以修改对应的 background-color 弹框背景颜色值,以及添加 font-size 样式。
效果:
示例 2:通过修改配置项,自定义弹窗动作
var messageOpts = {
"closeButton": true,// 是否显示关闭按钮
"progressBar":true,// 是否显示进度条
"positionClass": "toast-bottom-left",// 弹出窗的位置
"showDuration": "1000",// 显示的动画时间
"hideDuration": "1000",// 消失的动画时间
"timeOut": "6000",// 弹窗展现时间
"showEasing": "swing",//显示时的动画缓冲方式
"hideEasing": "linear",//消失时的动画缓冲方式
"showMethod": "fadeIn",//显示时的动画方式
"hideMethod": "fadeOut", //消失时的动画方式
"allowHtml":true,// 允许弹窗内容包含 HTML 语言
};
toastr.options = messageOpts;
toastr.warning("注意,这是一条警告信息!", "警告")
弹窗样式:
示例 3:自定义弹出框的显示位置
如下自定义一个在页面中间位置显示的弹窗样式:(显示的位置可以灵活调整)
"positionClass": "toast-center-center",// 弹出窗的位置配置
四、options 配置项详解
下面例举一下常用的配置项:
closeButton | 是否显示关闭按钮 |
【默认 false】true:显示;false:不显示 |
progressBar | 是否显示进度条 | 【默认 false】true:显示;false:不显示 |
positionClass | 弹框的显示位置 |
【默认 toast-top-right 顶端右侧】 toast-top-left:顶端左边 |
showDuration | 显示动画持续时间 | 【默认 300ms】单位:毫秒 |
hideDuration | 消失动画持续时间 | 【默认 1000ms】单位:毫秒 |
timeOut | 弹框显示时间 | 【默认 5000ms】单位:毫秒 |
extendedTimeOut | 失去鼠标焦点后,重新的显示时间 | 【默认 1000ms】单位:毫秒 |
onclick | 单击弹框时触发的操作 | 【填入方法名】,例如方法:function toastrClick(){ alert("toastr onclick!") },对应的填入:toastrClick。 |
tapToDismiss | 单击弹框是否立即消失 | 【默认 true】true:立即消失;false:不消失 |
另,maxOpened 测试无效,暂不列出了。
注:个人整理,欢迎指正和补充。
toastr.js 便捷弹框怎么用?怎么本地化?的更多相关文章
- js实现弹框及自动关闭
<SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...
- Js仿弹框
收藏一个简单实用的JS弹框,通过隐藏和显示div来实现,代码来自脚本之家! <html> <head> <title> LIGHTBOX EXAMPLE </ ...
- js 简单弹框toast
新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document. ...
- JS 功能弹框封装
// 功能提示弹框 function messageBox ( option ) { var html = ''; html += '<div class="message-box-h ...
- js创建弹框(提示框,待确认框)
;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...
- 弹出框四 之toastr.js (完成提示框)
1.下载 toastr.js组件 2. $(function () { toastr.success('提交数据成功'); toastr.error('Error'); toastr.warning( ...
- 基于jquery的消息提示框toastr.js
//消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- js弹框3秒后自动消失
开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...
随机推荐
- System.IO.FileSystemWatcher的坑
System.IO命名空间下面有一个FileSystemWatcher,这个东西可以实现文件变动的提醒.需要监控文件夹变化(比如FTP服务器)的情形非常适用. 需要监控文件新建时,我们可以这么写: _ ...
- 动词时态=>2.动作的时间状态结合
动作和时间结合 现在的四种时态 现在进行时态 对于 现在这个时间点,这个 动作 还在进行当中 例如:我现在正在喝水 现在完成时态 对于 现在这个时间点,这个 动作 已然完成 例子:我现在已经喝完了水 ...
- FTP文本传输协议
一.存储类型 存储类型分为三种: 直连式存储:Direct-Attached Storage,简称DAS 网络附加存储:Network-Attached Storage,简称NAS(存储和管理空间都在 ...
- pta第二次博客
目录 pta第二次博客 1.前言 2.设计与分析 第四次作业第一题 第四次作业第一题 第四次作业第一题 第四次作业第一题 pta第二次博客 1.前言 2.设计与分析 第四次作业第一题 1.题目: &q ...
- Java多线程(7):JUC(上)
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 前面把线程相关的生命周期.关键字.线程池(ThreadPool).ThreadLocal.CAS.锁和AQS都讲完了,现在就剩下怎么来用多线程了 ...
- CSP2022游记
第一次几乎完全没有准备的比赛 也是倒数第二场比赛 Day -1 上了一天文化课,晚上还有强基班. 强基班上完之后来机房写了几个板子就开始颓废了 基本上就抱着摆烂的心态 不过是第一次在学校拿到手机 还在 ...
- 洛谷 P3201 梦幻布丁 题解
(这篇题解可能没什么营养,主要是记录一下我用map乱搞启发式合并的神奇做法) 首先我们知道,我们肯定要用一堆集合维护每一种数当前的位置,并支持合并和数连续出现的段数两种操作 我发现这个东西并不好搞,但 ...
- 再来一次,新技术搞定老业务「GitHub 热点速览 v.22.44」
上上周 Next.js 新版本火了一把,这不本周热点趋势就有了一个 Next.js 13 新特性构建的网站,虽然它只是个实验性项目.同样可以搞定一些业务的还有 lama-cleaner,不过它并不是个 ...
- c语言内存四区、数据存储范围和内存存储方向
(1)代码区通常是共享只读(代码无法修改)的,即可以被其他的程序调用,例如运行两个qq,除了数据不一样,代码都是一样的, 每次运行qq,都会将代码和数据加载到内存中,除了数据,每次加载的代码都是一样的 ...
- 直播CDN调度技术关键挑战与架构设计
作者:胡济麟 1.背景介绍 1.1 直播业务特点 互联网视频直播是一种消息媒介形态,提供时产时消的内容,经过多年,已经发展出秀场.游戏.电商.体育等多种业务形态.主要特点是:内容实时产生实时消费,对时 ...