前言

toastr.js是一个基于jQuery的非阻塞、简单、漂亮的消息提示插件，使用简单、方便。可以通过设置参数来设置提示窗口显示的位置、显示的动画等。
toastr.js可以设置四种提示样式：

成功(success)
错误(error)
提示(info)
警告(warning)

toastr环境准备

toastr.js官方文档以及源码 http://codeseven.github.io/toastr/

解压后，拷贝其中的 toastr.min.css 和 toastr.min.js 到项目中

在html页面引入引入 toastr.min.css 和 toastr.min.js，还有必不可少的 jquery 库

    <link rel="stylesheet" href="/toastr/css/toastr.min.css"><script src="/jquery/jquery-3.6.0.min.js"></script><script src="/toastr/js/toastr.min.js"></script>

需注意引入的顺序，先toastr.min.css，再jquery.js 最后是toastr.min.js。

使用示例

<body><div class="container"><button class="btn btn-info">info</button><button class="btn btn-success">success</button><button class="btn btn-warning">warning</button><button class="btn btn-danger">error</button>
</div></body>

调用方式很简单

toastr.info(“你有新消息了!”); //常规消息提示，默认背景为浅蓝色
toastr.success(“你有新消息了!”); //成功消息提示，默认背景为浅绿色
toastr.warning(“你有新消息了!”); //警告消息提示，默认背景为橘黄色
toastr.error(“你有新消息了!”); //错误消息提示，默认背景为浅红色

// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>//toastr消息$(".btn-info").click(function(){toastr.info('info 消息提示')});$(".btn-success").click(function(){toastr.success('操作成功！')});$(".btn-warning").click(function(){toastr.warning('警告内容！')});$(".btn-danger").click(function(){toastr.error('服务器异常！')});
</script>

实现效果，默认在屏幕右上角显示

可以通过toastr.info()方式调用，也可以用toastr’info’方式调用

toastr['info']('info 消息提示')

带标题的提示

toastr.info('info 消息提示', '提示')
// toastr['info']('info 消息提示', '提示')

实现效果

定制化toastr

自定义参数：

toastr.options = {  closeButton: false,  debug: false,  progressBar: false,  positionClass: "toast-top-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相同

顶端居中效果positionClass: "toast-top-center"

python测试开发django-128.Jquery消息提示插件toastr使用相关推荐

Jquery消息提示插件toastr使用详解
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 html <script ...
Jquery消息提示插件toastr
toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.css文件 <script src=&q ...
一款轻量级的消息提示插件 —— toastr
toastr是一款轻量级的消息提示插件,基于JQuery,使用简单方便,外观大气漂亮. 点击这里进入toastr在线调试使用点击这里进入toastr官方网站使用效果如下图所示: 插件使用需要引用的 ...
SpringCloud工作笔记059---Jquery消息提示插件toastr使用详解
JAVA技术交流QQ群:170933152 toastr是一个基于jQuery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. 1.使用很简单,首选引入toastr的js.c ...
python测试开发django（8）--django连接mysql
前言 Django对各种数据库提供了很好的支持,包括:PostgreSQL.MySQL.SQLite.Oracle.本篇以mysql为例简单介绍django连接mysql进行数据操作 Django连m ...
python测试开发django（9）--模型models详解
前言 Django模型是与数据库相关的,与数据库相关的代码一般写在models.py中,Django支持sqlite3,MySQL,PostgreSQL等数据库只需要在settings.py中配置即 ...
python测试开发django（20）--admin首页和title修改
前言 django的admin首页默认显示的"Django管理",title显示的是"Django站点管理员",这里的文案内容可以修改成自己项目的后台页面内容 ...
python测试开发django -141.Bootstrap 面板(Panels)
前言面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向元素添加 class .panel 和 class .panel-default 即可基础面板不带标题的基本面板 ...
可爱的python测试开发库(python测试开发工具库汇总)
2019独角兽企业重金招聘Python工程师标准>>> 欢迎转载,转载请注明来源: github地址谢谢点赞本文地址 Python测试开发库参考资料 https://githu ...

python测试开发django-128.Jquery消息提示插件toastr使用

前言

toastr环境准备

使用示例

定制化toastr

python测试开发django-128.Jquery消息提示插件toastr使用相关推荐

最新文章

热门文章