迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

Sweetalert详细介绍

发布时间: 2017-01-10 作者: 迹忆 浏览次数:

好长时间没有更新文章了,年底工作比较忙,确实是没有时间来写文章。今天忙里偷闲,总结了一款前端提示框的插件——sweetalert——推荐给大家。

点击查看演示

Sweetalert安装

Sweetalert官方为我们提供了三种安装方式:

方法一 通过bower安装

$ bower install sweetalert

方法二 通过npm安装

$ npm install sweetalert

这里需要注意的是npm安装的时候不要将sweetalert安装为本项目依赖,要把其安装到全局中

方法三 直接下载css文件和javascript文件

下载文件

安装完成以后我们需要在项目中引入sweetalert.css和sweetalert.min.js两个文件。这两个文件分别位于dist/css 和 dist/js文件夹中。

<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

引入文件以后,下面我们看一下调用方法(sweetalert为我们提供了两个方法名——sweetalert和swal)

swal({
  title: "Success!",
  text: "Here's my success message!",
  type: "success",
  confirmButtonText: "Cool"
});

Sweetalert使用介绍

sweetalert使用方法可以认为有以下两种形式

swal({
  title: "Success!",
  text: "Here's my success message!",
  type: "success"
});

swal(“Success!”,”Here’s my success message!”,”success”);

其实以上两种形式展现的样式是相同的。只是当提示信息所需要的功能简单,仅仅只需要提示信息时我们可以使用后者较为简单的形式。当稍微复杂的时候我们就需要使用前者较复杂的形式了。

Sweetalert参数及方法介绍

下面我们就sweetalert为我们提供的参数及参数对应的功能分别做一个简单的介绍。

title 必须参数 默认为null

该参数是对话框的标题。它可以作为json对象的键名也可以作为swal方法的第一个参数

swal(“这是title”)

或者

swal({
         title:”这是title”
});

查看演示

text 默认为null

该参数是对对话框的描述。同title一样,它不仅可以作为json对象的键名也可以作为swal方法的第二个参数

swal(“这是title”,”这是text”);

或者

swal({
         title:”这是title”,
         text:”这是text”
})

查看演示

type 默认为null

该参数设定了对话框的消息类型,sweetalert内置了四种类型,分别是”warning”(警告)、”info”(提示)、”success”(成功)和”error”(错误)。除了这四种之外用户还可以将该类型设为”input”使其成为可以交互的对话框。

同title和text一样,该参数可以作为json对象的键名,也可以作为swal方法的第三个参数。

swal(“这是title”,”这是text”,”success”);

或者

swal({
         title:”这是title”,
         text:”这是text”,
         type:”success”
});

查看演示

confirmButtonText、cancelButtonText、showCancelButton和showConfirmButton

confirmButtonText 默认为”OK”,cancelButtonText默认为”Cancel”。我们可以通过修改这两个参数的值来修改其显示的文本。

showCancelButton默认为false,也就是说默认情况下取消按钮是不显示的,所以说cancelButtonText使用的前提是showCancelButton设为true。

swal({
         title:”这是title”,
         text:”这是text”,
         type:”success”,
         showCancelButton:true,
         confirmButtonText:”确定”,
         cancelButtonText:”取消”
});

查看演示

showConfirmButton这就很好理解了,其默认为true。也就是说确定按钮是默认显示的,如果不显示的话可以将其设为false。

查看演示

closeOnConfirm 和 closeOnCancel 。他们表示当点击确认或者取消的时候是否关闭对话框。true关闭,false则不关闭。默认情况下为true,是关闭的。如果我们想将其设为不关闭,可以将其设置为false。但是,只将其设为false是不够的,还需要指定第二个参数的回调函数。

swal({
         title:”这是title”,
         text:”这是text”,
         type:”success”,
         showCancelButton:true,
         confirmButtonText:”确定”,
         cancelButtonText:”取消”,
         closeOnConfirm:false,
         closeOnCancel:false,
},function(isConfirm){
         If(isConfirm){
                   swal(‘成功’);
         }else{
                   swal(‘取消’);
         }
});

查看演示

html 默认为false。如果设置为true,则会解析title和text中的html标签

swal({
    title:"HTML <small>Title</small>!",
    text:"自定义<span style='color:#f8bb86;'>html</span>内容!",
    html:true
});

查看演示

timer 默认为null,该参数是用来设定对话框自动关闭的。以ms为单位

swal({
    title:"自动关闭提示框!",
    text:"设置2秒后自动关闭!",
    timer:2000,
    showConfirmButton:false
});

查看演示

inputType、inputPlaceholder和inputValue 这三个前提都是type设为input才有效。

inputType指定输入框类型,默认为text。

swal({
    title:"输入框",
    text:"在输入框中输入一些信息吧!",
    type:'input',
    showCancelButton:true,
    closeOnConfirm:false,
    inputPlaceholder:"输入信息"
},
function(inputValue){
    if(inputValue === false) return false;
    if(inputValue === ''){
        swal.showInputError("内容不能为空,请输入一些信息!")
        return false;
    }
    swal("Good!", "您输入的是: " + inputValue, "success");
});

查看演示

imageUrl和imageSize ,这两个参数和自定义对话框的图标有关。

imageUrl指定图标的地址。默认为null。

imageSize指定图标的大小,当imageUrl指定了图标地址该参数才有效。默认大小为80x80。该参数指定的值用x分割,第一个是宽度(width),第二个是高度(height)

swal({
    title:"Sweet!",
    text:"这是自定义的图标!",
    imageUrl:'Images/thumbs-up.jpg',
    imageSize:’90x90’
});

查看演示

animation表示的是对话框显示时的动画。默认动画是pop(淡出),也可以指定slide-from-top(从上面滑入)和slide-from-bottom(从下面滑入)。如果设为false则没有动画。

swal({
    title:"Animation 动画",
    text:"我是从上面掉下来的!",
    type:'info',
    animation:"slide-from-top",
});

查看演示

showLoaderOnConfirm 默认为false。当该参数设为true的时候会禁用按钮,并且显示正在加载的图标。常用的情形是当用户点击了确认按钮以后会提交ajax,这时在ajax提交的过程中禁用按钮,并且显示正在加载。除此之外在这期间还不能关闭对话框。下面是模拟ajax请求过程。

swal({
    title:"Ajax 使用示例!",
    text:"提交ajax请求!",
    type:'info',
    showCancelButton:true,
    closeOnConfirm:false,
    showLoaderOnConfirm:true
},function(){
    setTimeout(function(){
        swal("Ajax 请求完成!");
    }, 2000);
});

查看演示

allowOutsideClick 默认为false,如果设为true,则用户点击对话框以外的区域关闭对话框。

swal({
    title:"AllowOutsideClick",
    text:"不用点击我了,点击我以外的区域我也会消失的!",
    type:'info',
    allowOutsideClick:true,
    showConfirmButton:false
});

查看演示

allowEscapeKey 默认为false,如果设为true,则用户按键盘上的esc键即可关闭对话框。

swal({
    title:"allowEscapeKey",
    text:"不用点击我了,按下键盘上的ESC键我就消失了!",
    type:'info',
    allowEscapeKey:true,
    showConfirmButton:false
});

查看演示

以上是对sweetalert所有参数及其所标识的功能的介绍。灵活运用各个参数,能使我们的网页效果更加丰富。

赞助
迹忆博客

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: