• jQuery消息提示插件toastr使用详解


    ## 引入

    ```html
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
    <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
    ```

    ## 使用

    ```html
    toastr.success('Hello world!', 'Toastr fun!'); /success 、 error、info、warning 第二个参数为标题可以省略

    //关闭警告框
    toastr.clear([toast]);

    //获取当前警告框
    toastr.active();

    //刷新警告框 第二个参数为超时时间
    toastr.refreshTimer(toast, 5000);
    ```

    ## 参数配置

    ```javascript
    toastr.options = {
    closeButton: false,
    debug: false,
    progressBar: true,
    positionClass: "toast-top-center",
    onclick: null,
    showDuration: "300",
    hideDuration: "1000",
    timeOut: "2000",
    extendedTimeOut: "1000",
    showEasing: "swing",
    hideEasing: "linear",
    showMethod: "fadeIn",
    hideMethod: "fadeOut" ,
    newestOnTop: true,
    preventDuplicates: true,
    preventOpenDuplicates: true,
    maxOpened:1 ,
    allowHtml: false,
    closeButton: false,
    closeHtml: '<button>×</button>',
    extendedTimeOut: 1000,
    iconClasses: {
    error: 'toast-error',
    info: 'toast-info',
    success: 'toast-success',
    warning: 'toast-warning'
    },
    messageClass: 'toast-message',
    onHidden: null,
    onShown: null,
    onTap: null,
    progressBar: false,
    tapToDismiss: true,
    templates: {
    toast: 'directives/toast/toast.html',
    progressbar: 'directives/progressbar/progressbar.html'
    },
    timeOut: 5000,
    titleClass: 'toast-title',
    toastClass: 'toast'

    };
    ```
    说明:

    - autoDismiss: true 显示最新的toastr
    - containerId: 默认为"toast-container",设置toastr容器的id名称.
    - maxOpened: 页面一次性最多显示多少个toastr.
    - newestOnTop: true 新的toastr会显示在旧的toastr前面
    - positionClass: 设置toastr显示位置的class
    - preventDuplicates: true 重复内容的提示框只出现一次,无论提示框是打开还是关闭
    - preventOpenDuplicates: true 重复内容的提示框在开启时只出现一个 如果当前的提示框已经打开,不会多开。直到提示框关闭后,才可再开)
    - target: 默认为'body', 设置toastr的目标容器
    - 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

    注意:如果想让toastr点击关闭按钮时才能关闭,可以将“extendedTimeOut”设置为一个很大的数字。

  • 相关阅读:
    debounce
    react-xiguan
    备忘录
    ie导出问题
    umi 动态路由配置
    tsconfig
    关于vue 和react 中的hash与锚点冲突问题
    lodash
    pyplot绘图
    Numpy实现图像变换
  • 原文地址:https://www.cnblogs.com/samve/p/14165590.html
Copyright © 2020-2023  润新知