toast提醒_jquery弹窗插件dialog

(4) 2024-07-01 13:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
toast提醒_jquery弹窗插件dialog,希望能够帮助你!!!。

目录

  • 简介
  • 一、准备工作
  • 二、简单使用
  • 三、进阶使用
    • 示例 1:修改弹窗的颜色、标题的样式
    • 示例 2:通过修改配置项,自定义弹窗动作
    • 示例 3:自定义弹出框的显示位置
  • 四、options 配置项详解

简介

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();// 移除所有,没有动画效果 

弹窗模样:

注:鼠标锁定焦点时,颜色会加重,如下带标题的成功弹框。
toast提醒_jquery弹窗插件dialog_https://bianchenghao6.com/blog__第1张

三、进阶使用

可以通过修改样式文件 toastr.css 来定制弹框的样式。

示例 1:修改弹窗的颜色、标题的样式

如下图中的位置,可以修改对应的 background-color 弹框背景颜色值,以及添加 font-size 样式。

toast提醒_jquery弹窗插件dialog_https://bianchenghao6.com/blog__第2张
效果:
toast提醒_jquery弹窗插件dialog_https://bianchenghao6.com/blog__第3张

示例 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("注意,这是一条警告信息!", "警告") 

弹窗样式:
toast提醒_jquery弹窗插件dialog_https://bianchenghao6.com/blog__第4张

示例 3:自定义弹出框的显示位置

如下自定义一个在页面中间位置显示的弹窗样式:(显示的位置可以灵活调整)

"positionClass": "toast-center-center",// 弹出窗的位置配置 

toast提醒_jquery弹窗插件dialog_https://bianchenghao6.com/blog__第5张

四、options 配置项详解

下面例举一下常用的配置项:

1 2 3
closeButton 是否显示关闭按钮 【默认 false】true:显示;false:不显示
progressBar 是否显示进度条 【默认 false】true:显示;false:不显示
positionClass 弹框的显示位置 【默认 toast-top-right 顶端右侧】toast-top-left:顶端左边
toast-top-right:顶端右边
toast-top-center:顶端中间
toast-top-full-width:顶端中间(宽度铺满)
toast-bottom-right:底部右边
toast-bottom-left:底部左边
toast-bottom-center:底部中间
toast-bottom-full-width:底部中间(宽度铺满)
showDuration 显示动画持续时间 【默认 300ms】单位:毫秒
hideDuration 消失动画持续时间 【默认 1000ms】单位:毫秒
timeOut 弹框显示时间 【默认 5000ms】单位:毫秒
extendedTimeOut 失去鼠标焦点后,重新的显示时间 【默认 1000ms】单位:毫秒
onShown 弹框显示时触发的操作 toastr.options.onShown = function() { console.log(‘hello’); }
onHidden 弹框自动消失时触发的操作 toastr.options.onHidden = function() { console.log(‘goodbye’); }
onclick 单击弹框时触发的操作 toastr.options.onclick = function() { console.log(‘clicked’); }
onCloseClick 手动关闭弹框时触发的操作 toastr.options.onCloseClick = function() { console.log(‘close button clicked’); }
tapToDismiss 单击弹框是否立即消失 【默认 true】true:立即消失;false:不消失

另,maxOpened 测试无效,暂不列出了。

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复