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

女爷i 2022-05-25 07:15 251阅读 0赞

### sweetalert ###

### 下载&安装 ###

Bower

$ bower install sweetalert

npm

$ npm install sweetalert

[点击下载][Link 1]

### 使用 ###

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

![20180509172936440][]

上图效果代码如下

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/][https_sweetalert.js.org_docs]

### jNotify ###

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

### [点击下载][Link 2]    ###

jNotify的使用非常简单。

![2018051010551946][]

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

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

**具体使用例子**

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

![70][]

#### 下载&安装 ####

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][https_github.com_CodeSeven_toastr]

[Link 1]: https://github.com/t4t5/sweetalert/archive/master.zip
[20180509172936440]: /images/20220525/e2886f03d4fa41648f079324d1ed5ef5.png
[https_sweetalert.js.org_docs]: https://sweetalert.js.org/docs/
[Link 2]: https://pan.baidu.com/s/17MOKwaXxQhwz7SrCSg7qaw
[2018051010551946]: /images/20220525/ce9adfd654384a28b2d4d1ad220c54f1.png
[70]: /images/20220525/3ca353cc5a76464cb6ad1b737d0e1d85.png
[https_github.com_CodeSeven_toastr]: https://github.com/CodeSeven/toastr