zoukankan      html  css  js  c++  java
  • Jquery消息提示插件toastr使用详解

    toastr是一个基于Jquery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。
    1、使用很简单,首选引入toastr的js、css文件
    html
    <script src="<%=path%>/res/toastr/toastr.min.js"></script>
    <link rel="stylesheet" href="<%=path%>/res/toastr/toastr.min.css">
    1
    2
    2、效果

    3、集成使用
    //常规消息提示,默认背景为浅蓝色 
    toastr.info("你有新消息了!"); 
    1
    2
    //成功消息提示,默认背景为浅绿色
    toastr.success("你有新消息了!"); 
    1
    2
    //警告消息提示,默认背景为橘黄色
    toastr.warning("你有新消息了!"); 
    1
    2
    //错误消息提示,默认背景为浅红色
    toastr.error("你有新消息了!"); 
    1
    2
    //带标题的消息框
    toastr.success("你有新消息了!","消息提示"); 
    1
    2
    //另一种调用方法
    toastr["info"]("你有新消息了!","消息提示");
    1
    2
    4、自定义用法
    通过设置自定义参数,可达到不同的效果
    自定义参数:
    javascript
    toastr.options = { 
            closeButton: false, 
            debug: false, 
            progressBar: true, 
            positionClass: "toast-bottom-center", 
            onclick: null, 
            showDuration: "300", 
            hideDuration: "1000", 
            timeOut: "2000", 
            extendedTimeOut: "1000", 
            showEasing: "swing", 
            hideEasing: "linear", 
            showMethod: "fadeIn", 
            hideMethod: "fadeOut" 
        }; 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    参数说明:
    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
    1
    2
    3
    4
    5
    6
    7
    8
    onclick,点击消息框自定义事件
    showDuration: “300”,显示动作时间
    hideDuration: “1000”,隐藏动作时间
    timeOut: “2000”,自动关闭超时时间
    extendedTimeOut: “1000”
    showEasing: “swing”,
    hideEasing: “linear”,
    showMethod: “fadeIn” 显示的方式,和jquery相同
    hideMethod: “fadeOut” 隐藏的方式,和jquery相同
    ---------------------
    作者:风中斗士
    来源:CSDN
    原文:https://blog.csdn.net/cyh1111/article/details/53141037
    版权声明:本文为博主原创文章,转载请附上博文链接!
  • 相关阅读:
    POJ 1659 Frogs' Neighborhood
    zoj 2913 Bus Pass(BFS)
    ZOJ 1008 Gnome Tetravex(DFS)
    POJ 1562 Oil Deposits (DFS)
    zoj 2165 Red and Black (DFs)poj 1979
    hdu 3954 Level up
    sgu 249 Matrix
    hdu 4417 Super Mario
    SPOJ (BNUOJ) LCM Sum
    hdu 2665 Kth number 划分树
  • 原文地址:https://www.cnblogs.com/honey01/p/9888159.html
Copyright © 2011-2022 走看看