收藏本帖 楼主热帖
  • 去顶部
  • 257 次浏览
  • 0 次回复
  • 0 次收藏
  • 0 次点赞
  • 去底部

toastr 通知提示插件参数

  1. Seven
    <link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css"; rel="stylesheet">
    <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js";></script>

    //常规消息提示,默认背景为浅蓝色
    toastr.info("你有新消息了!");

    //成功消息提示,默认背景为浅绿色
    toastr.success("你有新消息了!");

    //警告消息提示,默认背景为橘黄色
    toastr.warning("你有新消息了!");

    //错误消息提示,默认背景为浅红色
    toastr.error("你有新消息了!");

    //带标题的消息框
    toastr.success("你有新消息了!","消息提示");

    JS:

    1. toastr.options = {  
    2.     closeButton: false,  
    3.     debug: false,  
    4.     progressBar: true,  
    5.     positionClass: "toast-bottom-center",  
    6.     onclick: null,  
    7.     showDuration: "300",  
    8.     hideDuration: "1000",  
    9.     timeOut: "2000",  
    10.     extendedTimeOut: "1000",  
    11.     showEasing: "swing",  
    12.     hideEasing: "linear",  
    13.     showMethod: "fadeIn",  
    14.     hideMethod: "fadeOut"  
    15. };
    复制代码


    onclick,点击消息框自定义事件
    showDuration: “300”,显示动作时间
    hideDuration: “1000”,隐藏动作时间
    timeOut: “2000”,自动关闭超时时间
    extendedTimeOut: “1000”
    showEasing: “swing”,
    hideEasing: “linear”,
    showMethod: “fadeIn” 显示的方式,和jquery相同
    hideMethod: “fadeOut” 隐藏的方式,和jquery相同
    另外:

    1. app.config(function(toastrConfig) {
    2.   angular.extend(toastrConfig, {
    3.     allowHtml: false,
    4.     closeButton: false,
    5.     closeHtml: '<button>×</button>',
    6.     extendedTimeOut: 1000,
    7.     iconClasses: {
    8.       error: 'toast-error',
    9.       info: 'toast-info',
    10.       success: 'toast-success',
    11.       warning: 'toast-warning'
    12.     },
    13.     messageClass: 'toast-message',
    14.     onHidden: null,
    15.     onShown: null,
    16.     onTap: null,
    17.     progressBar: false,
    18.     tapToDismiss: true,
    19.     templates: {
    20.       toast: 'directives/toast/toast.html',
    21.       progressbar: 'directives/progressbar/progressbar.html'
    22.     },
    23.     timeOut: 5000,
    24.     titleClass: 'toast-title',
    25.     toastClass: 'toast'
    26.   });
    27. });
    复制代码


    allowHtml: 设置提示内容可包含html格式
    closeButton: 设置显示"X" 关闭按钮
    closeHtml: 自定义html替代closeButton内容,closeButton为true时才显示.
    extendedTimeOut: 设置当你鼠标滑入后的timeout,该timeout会更新关闭所需的timeout.
    extraData: 如果重写模版,你可以自定义全局数据给你的toasts
    iconClasses: 设置各个类型的icon图标class
    messageClass: 设置toastr提示信息的class
    progressBar: 设置显示timeout时间进度条
    tapToDismiss: 设置toastr被点击时关闭
    templates: 自定义模版
    timeOut: 设置toastr过多久关闭
    titleClass: 设置toastr标题的class
    toastClass: 设置toastr基本的class

    位置:
    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

    补充个loading样式
    1. <style>.toast-top-center{top:30px}#toast-container > .toast-loading{background-color:#03a9f4;background-image: url(data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7) !important;}</style>
    复制代码


    toastr.options是全局设定,局部使用时如未添加重设规则,则全部遵守全局设定。

    局部重设形式示例

    1. toastr.info("{lang time_now}","title",{"positionClass":"toast-bottom-left"});
    复制代码

共 0 条回复,还没有人回复,抢个沙发吧!

高级模式
您需要登录后才可以回帖 登录 | 立即注册

QQ|Archiver|小黑屋|7 talk

GMT+8, 2021-1-21 01:18 , Processed in 0.022640 second(s), 28 queries . Powered by Discuz!