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

前言

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

  • 成功(success)

  • 错误(error)

  • 提示(info)

  • 警告(warning)

toastr环境准备

toastr.js官方文档以及源码 https://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"

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

(0)

相关推荐

  • jQuery选择器之层级选择器(2)

    jQuery选择器之层级选择器(2) jQuery的层级选择器中主要包括四种,分别为后代选择器.子元素选择器.相邻元素选择器.之后的兄弟元素选择器. 以下实例演示都是通过的元素颜色的变化展示. 未变色 ...

  • 小文聊天机器人(jquery.chatbot.js)使用指南

    @小文聊天机器人由我爱作文网开发,引入在线聊天机器人起初是为了更好的方便访问者以自然语言的方式搜索我爱作文网的站内文章. @本着分享的精神,现将小文聊天机器人框架分享出来,给大家提供一个搭建在线聊天机 ...

  • 60 个前端常用插件库合集

    作者:寒青 https://segmentfault.com/a/1190000019151460 DataTables 官网:https://www.datatables.net/ DataTabl ...

  • python测试开发django -140.Bootstrap 缩略图

    前言 网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 class .thumbnail 的& ...

  • python测试开发django -143.Bootstrap 表单控件校验状态

    前言 Bootstrap 对表单控件的校验状态,如 error.warning 和 success 状态,都定义了样式.使用时,添加 .has-warning..has-error 或 .has-su ...

  • python测试开发django -142.Bootstrap 表单(form)

    前言 HTML 表单用于收集不同类型的用户输入.boostrap中表单有几种样式 基本垂直表单 内联表单 form-inline 水平排列表单 form-horizontal 基本表单实例 单独的表单 ...

  • python测试开发django -141.Bootstrap 面板(Panels)

    # 前言 面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 元素添加 class .panel 和 class .panel-default 即可 基础面板 不带标题的基本面 ...

  • python测试开发django -144.Ace Editor 在线编辑python代码

    前言 网页上想在线编辑代码,可以使用Ace Editor 在线编辑实现.比如我们想实现一个功能,在网页版上写python代码,能有python的语法自动补齐功能. Ace Editor 在线编辑 AC ...

  • python测试开发django-10.django连接mysql

    前言 Django 对各种数据库提供了很好的支持,包括:PostgreSQL.MySQL.SQLite.Oracle.本篇以mysql为例简单介绍django连接mysql进行数据操作 Django连 ...

  • python测试开发django-50.jquery发送Ajax请求(get)

    前言 有时候,我们希望点击页面上的某个按钮后,不刷新整个页面,给后台发送一个请求过去,请求到数据后填充到html上,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.Ajax可以完美的 ...

  • python测试开发django-73.django视图 CBV 和 FBV

    前言 FBV(function base views) 就是在视图里使用函数处理请求,这一般是学django入门的时候开始使用的方式. CBV(class base views) 就是在视图里使用类处 ...

  • python测试开发django-83.Dockerfile部署django项目

    前言 现在流行用 docker 部署环境,python 开发的 django 项目也可以写个 Dockefile 文件,方便docker部署. django 是依赖于python环境的,所有镜像制作是 ...