sweetalert api文档

官网和下载地址： http://t4t5.github.io/sweetalert/

基本使用：

  • 基本消息消息弹窗

    swal("Here's a message!")

  • 下面有文字的标题弹窗

    swal("Here's a message!", "It's pretty, isn't it?")

  • 一个成功的消息弹窗

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

  • 一个警告消息，其功能附加到“确认”按钮的弹窗

    swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

  • 并通过传递一个参数，你可以执行别的“取消”

    swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

  • 带有自定义图标

    swal({
  title: "Sweet!",
  text: "Here's a custom image.",
  imageUrl: "images/thumbs-up.jpg"
});

  • 自定义HTML消息

    swal({
  title: "HTML <small>Title</small>!",
  text: "A custom <span style="color:#F8BB86">html<span> message.",
  html: true
});

  • 带有自动关闭计时器的消息的弹窗

    swal({
  title: "Auto close alert!",
  text: "I will close in 2 seconds.",
  timer: 2000,
  showConfirmButton: false
});

  • 替换“提示”功能

    swal({
  title: "An input!",
  text: "Write something interesting:",
  type: "input",
  showCancelButton: true,
  closeOnConfirm: false,
  animation: "slide-from-top",
  inputPlaceholder: "Write something"
},
function(inputValue){
  if (inputValue === false) return false;
  
  if (inputValue === "") {
    swal.showInputError("You need to write something!");
    return false
  }
  
  swal("Nice!", "You wrote: " + inputValue, "success");
});

  • 使用加载器（例如AJAX请求）

    swal({
  title: "Ajax request example",
  text: "Submit to run ajax request",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){
    swal("Ajax request finished!");
  }, 2000);
});

  • 你也可以改变SweetAlert的主题css

    <link rel="stylesheet" type="text/css"href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css"href="themes/twitter.css">

安装

  1. 通过引用必要的文件来初始化插件：

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

  2. 页面加载后调用SweetAlert函数

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

 

 

配置

这里是你可以使用的键，如果你传递一个对象到sweetAlert：

modal中文翻译是模态框 ,次文档为了理解容易，现在统一翻译为动态弹出框

 
参数		默认值
 
说明描述
title null (required) 动态弹出框的标题。 它可以添加到键“title”下的对象，也可以作为函数的第一个参数传递
text null 动态弹出框的描述。 它可以被添加到键“文本”下的对象或作为函数的第二个参数传递
type null 动态弹出框的类型。 SweetAlert自带4种内置类型，会显示相应的图标动画：“warning”，“error”，“success”和“info”。 您也可以将其设置为“输入”以获得提示模态。 它可以放在键“类型”下的对象中，也可以作为函数的第三个参数传递
allowEscapeKey true 如果设置为true，用户可以通过按退出键退出动态弹出框
customClass null 模态的自定义CSS类。 它可以添加到对象的键“自定义类”下
allowOutsideClick false 如果设置为true，用户可以通过点击模态来关闭动态弹出框
showCancelButton false 如果设置为true，将显示一个“取消”按钮，用户可以单击该按钮来关闭动态弹出框
showConfirmButton true 如果设置为false，“确定/确认”按钮将被隐藏。 确保您设置一个计时器或设置允许外点击为true时使用此，以免引起用户的烦恼
confirmButtonText "OK" 使用此按钮可以更改“确认”按钮上的文本。 如果showsCancelButton设置为true，确认按钮将自动显示“Confirm”，而不是“OK”
confirmButtonColor "#AEDEF4" 使用此选项可更改“确认”按钮的背景颜色（必须为十六进制值）
cancelButtonText "Cancel" 使用此按钮可以更改“取消”按钮上的文本
closeOnConfirm true 如果您希望动态弹出框保持打开，即使用户按下“确认”按钮，设置为false。 如果附加到“确认”按钮的功能是另一个SweetAlert，这是特别有用的
closeOnCancel true 与关闭相同确认，但用于取消按钮
imageUrl null 为动态弹出框添加自定义图标。 应包含带有图像路径的字符串
imageSize "80x80" 如果设置了imageUrl，您可以指定imageSize来描述图标在px中的大小。 传递一个字符串，两个值之间用“x”分隔。 第一个值是宽度，第二个值是高度
timer null 动态弹出框的自动关闭定时器。 设置为ms（毫秒）。
html false 如果设置为true，将不转义标题和文本参数。 （如果您担心XSS攻击，请设置为false。）
animation true 如果设置为false，动态弹出框动画将被禁用。 可能的（字符串）值：pop（动画设置为true时的默认值），从顶部滑动，从底部滑动
inputType "text" 使用type：“input”时更改输入字段的类型（如果您希望用户输入其密码，这将非常有用）
inputPlaceholder null 使用输入类型时，可以指定一个占位符来帮助用户
inputValue null 指定在使用类型时希望输入显示的默认文本值：“input”
showLoaderOnConfirm false 设置为true可禁用按钮，并显示正在加载某些内容

方法举例

SweetAlert还提供了一些简单的方法，你可以调用：
 
方法		例子
 
方法说明
setDefaults swal.setDefaults({ confirmButtonColor: '#0000' }); 如果你在调用SweetAlert时最终使用了很多相同的设置，你可以在程序的开始使用setDefaults来设置它们一次
close swal.close(); 以编程方式关闭当前打开的SweetAlert
showInputError swal.showInputError("Invalid email!"); 如果用户的数据不正确，请在验证输入字段后显示错误消息
enableButtons, disableButtons swal.disableButtons(); 禁用或启用用户单击取消和确认按钮

 

参考文章：

http://t4t5.github.io/sweetalert/

http://www.cnblogs.com/zx-admin/p/6009558.html

posted @ 2017-03-30 16:56  培杰  阅读(3504)  评论(0)  编辑  收藏  举报