消息提示插件：toastr.js

toastr.js插件的特点：

toastr.js是一个基于jQuery的非阻塞、简单、漂亮的消息提示插件，使用简单、方便。

toastr.js可以设置四种提示样式：成功(success)、错误(error)、提示(info)、警告(warning)。

可以通过设置参数来设置提示窗口显示的位置、显示的动画等。

调用toastr.js插件之前需要先引入jquery.js     toastr.js       toastr.css

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />

<script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

注意：toastr.js是基于jquery.js库，所以必须在toastr.js之前引入jquery.js

一、在.js中直接调用：

1、常规消息提示，背景色为浅蓝色：

      toastr.info('你有新消息了！')

     显示效果：

     

2、成功消息提示，背景色为浅绿色：

     toastr.success('你有新消息了！');

    显示效果：

    

3、警告消息提示，背景色为橘黄色：

     toastr.warning('你有新消息了！');

    显示效果：

       

4、错误消息提示，背景色为红色：

     toastr.error('你有新消息了！');

     显示效果：

    

注意可以让消息框带标题：

      toastr.error('你有新消息了！'，‘错误提示框’);

二、自定义用法，设定参数，达到不同效果

1、首先设定参数：

toastr.options = {  
        closeButton: false,                                            // 是否显示关闭按钮，（提示框右上角关闭按钮）
        debug: false,                                                    // 是否使用deBug模式
        progressBar: true, // 是否显示进度条，（设置关闭的超时时间进度条） positionClass: "toast-bottom-center", // 设置提示款显示的位置 onclick: null, // 点击消息框自定义事件  showDuration: "300", // 显示动画的时间 hideDuration: "1000", // 消失的动画时间 timeOut: "2000", // 自动关闭超时时间  extendedTimeOut: "1000", // 加长展示时间 showEasing: "swing", // 显示时的动画缓冲方式 hideEasing: "linear", // 消失时的动画缓冲方式 showMethod: "fadeIn", // 显示时的动画方式 hideMethod: "fadeOut" // 消失时的动画方式 }; 

     调用插件：(四种方法都可以用)

     toastr.warning('你有新消息了！');           toastr.success('你有新消息了！');              toastr.error('你有新消息了！');      toastr.info('你有新消息了！');

三、自定义参数，将提示框进行封装

1、对toastr.error()函数的封装

function error_prompt_alert(content) {

    //设定参数
    toastr.options = {
        closeButton: false,
        debug: false,
        progressBar: false,
        positionClass: "toast-top-center",
        onclick: null,
        showDuration: "300",
        hideDuration: "1000",
        // timeOut: "1500",  
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };
    if (content == null) {
        content = '';
    }
    var len = content.length;
    if (len <= 10 && len > 0) {
        toastr.options.timeOut = "1800";
    } else if (len <= 20) {
        toastr.options.timeOut = "2800";
    } else if (len <= 30) {
        toastr.options.timeOut = "3800";
    } else if (len > 30) {
        toastr.options.timeOut = "4800";
    }

    //调用插件
    toastr.error(content);
}

用法： error_prompt_alert（‘错误’）；

2、对toastr.success()函数的封装

function success_prompt_alert(content) {
    toastr.options = {
        closeButton: false,
        debug: false,
        progressBar: false,
        positionClass: "toast-top-center",
        onclick: null,
        showDuration: "300",
        hideDuration: "1000",
        // timeOut: "1000",  
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };
    if (content == null) {
        content = '';
    }
    var len = content.length;
    if (len <= 10 && len > 0) {
        toastr.options.timeOut = "1800";
    } else if (len <= 20) {
        toastr.options.timeOut = "2800";
    } else if (len <= 30) {
        toastr.options.timeOut = "3800";
    } else if (len > 30) {
        toastr.options.timeOut = "4800";
    }
    toastr.success(content);
}