提示框插件sweetalert、jNotify、toastr介绍及其使用

sweetalert

下载&安装

Bower

$ bower install sweetalert

npm

$ npm install sweetalert

 点击下载

使用

1. 引用必要的css、js文件初始化插件
2. 页面加载完成后调用sweetaler函数

上图效果代码如下

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

弹出框的基本使用

swal("Good job!", "You clicked the button!", "success");

第一个参数模式的标题，第二个是它的文本，第三个是添加图标到框中“info”、“success”、“warning”、“error”；上面的例子可以用一个对象作为唯一参数来写，如下

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
});

两种语法可以结合使用，此处再加上第四个参数button，为按钮设置文本。当button：true时除了默认确认按钮，还会多出一个取消按钮。

swal("Good job!", "You clicked the button!", "success", {
  button: "Aww yiss!",
});

跟踪用户交互

swal("Click on either the button or outside the modal.")
.then((value) => {
  swal(`The returned value is: ${value}`);
});

点击确认按钮，则为“true”，点击取消或者弹出框外为null。

sweetalert还可以高度定制，配置及其简单方法请移步：https://sweetalert.js.org/docs/

jNotify

jNotify是一款简单且优秀的jQuery结果提示框插件，兼容性很好，支持定位提示框位置，支持内容更改，可设置显示与消失时间不影响后续操作。

点击下载

jNotify的使用非常简单。

$(function(){ 
   $(element).click(function(){ 
       jSuccess(message,{option}); 
   });   
});

它支持三种调用方式，jSuccess()，jError()，jNotify。message为提示信息内容，支持html标签；option为参数配置项，不用则为默认配置。

具体使用例子

$(function() { 
    $("element").click(function() { 
        jSuccess("操作成功 + <strong>！</strong> ", { 
            VerticalPosition: 'center', 
            HorizontalPosition: 'center' 
        }); 
    }); 
    $("element").click(function() { 
        jNotify("注意：<strong>这是提醒信息！</strong>"); 
    }); 
    $("element").click(function() { 
        jError("操作失败，请重试!!"); 
    }); 
    $("element").click(function() { 
        jSuccess("操作成功，2秒后显示下一个提示框!!", { 
            TimeShown: 2000, 
            onClosed: function() { 
                jNotify("注意：点击这里显示下一个提示框", { 
                    VerticalPosition: 'top', 
                    autoHide: false, 
                    onClosed: function() { 
                        jError("出错啦! 演示结束,<br /> 请点击背景层关闭提示框。", { 
                            clickOverlay: true, 
                            autoHide: false, 
                            HorizontalPosition: 'left' 
                        }); 
                    } 
                }); 
            } 
        }); 
    }); 
});

jNotify详细配置

autoHide : true,                // 是否自动隐藏提示条
clickOverlay : false,            // 是否单击遮罩层才关闭提示条
MinWidth : 200,                    // 最小宽度
TimeShown : 1500,                 // 显示时间：毫秒
ShowTimeEffect : 200,             // 显示到页面上所需时间：毫秒
HideTimeEffect : 200,             // 从页面上消失所需时间：毫秒
LongTrip : 15,                    // 当提示条显示和隐藏时的位移
HorizontalPosition : "right",     // 水平位置:left, center, right
VerticalPosition : "bottom",     // 垂直位置：top, center, bottom
ShowOverlay : true,                // 是否显示遮罩层
ColorOverlay : "#000",            // 设置遮罩层的颜色
OpacityOverlay : 0.3,            // 设置遮罩层的透明度
onClosed:fn            //关闭提示框后执行函数，可以再次调用其他jNotify。如上面的三个依次调用。

toastr

totastr是一个用JavaScript库创建非阻塞的页面消息提醒，有四种通知模式：info、success、warning、error。基本效果如下

下载&安装

NuGet Gallery

Install-Package toastr

Bower

bower install toastr

npm

npm install --save toastr

使用

引入css、js文件，再调用toastr函数。

//显示一个警告,没有标题
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
//显示一个成功,标题
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
//显示错误标题
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
//使用动画清除当前的toatrs
toastr.clear()
//立刻清除当前的toatrs不是用动画
toastr.remove()
//全局参数配置
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

配置

//参数设置，若用默认值可以省略以下面代
    toastr.options = {
        "closeButton": false, //是否显示关闭按钮
        "debug": false, //是否使用debug模式
        "positionClass": "toast-top-full-width",//弹出窗的位置
        "showDuration": "300",//显示的动画时间
        "hideDuration": "1000",//消失的动画时间
        "timeOut": "5000", //展现时间
        "extendedTimeOut": "1000",//加长展示时间
        "showEasing": "swing",//显示时的动画缓冲方式
        "hideEasing": "linear",//消失时的动画缓冲方式
        "showMethod": "fadeIn",//显示时的动画方式
        "hideMethod": "fadeOut" //消失时的动画方式
        };

弹出窗位置

1 toast-top-left  顶端左边
2 toast-top-right    顶端右边
3 toast-top-center  顶端中间
4 toast-top-full-width 顶端，宽度铺满整个屏幕
5 toast-botton-right  
6 toast-bottom-left
7 toast-bottom-center
8 toast-bottom-full-width

回调函数

定义当toatrs显示、隐藏、点击时的回调

toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }

详情请看：https://github.com/CodeSeven/toastr