sweetalert api中文开发文档和手册

官网和下载地址： http://t4t5.github.io/sweetalert/  2016年10月30日14:10:21

废话，目前php开发越来越API话，所以php方法很多都是json返回数据，所以使用前段页面直接处理返回数据也越来越常用，而且用户体验也会更好

• 基本消息消息弹窗

  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();	禁用或启用用户单击取消和确认按钮

一个实例

<script>
    $(document).ready(function () {
        //删除
        $(document).on('click', '[id=ApiManagement_del]', function () {
            var id = $(this).attr('rel');

            swal({
                title: "您确定要执行此操作吗？",
//                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                closeOnConfirm: false
            }, function () {

                $.ajax({
                    url: "{:U('App_admin/ApiManagement/del')}",
                    data: {
                        app_api_id: id
                    },
                    type: 'post',
                    cache: false,
                    success: function (msg) {
                        if (msg.code === 1) {
                            swal("删除成功！", "", "success");
                            $('.confirm').click(function () {   //额外绑定一个事件，当确定执行之后返回成功的页面的确定按钮，点击之后刷新当前页面或者跳转其他页面
                                location.reload();
                            });

                        } else {
                            swal("删除失败！", "", "error");
                            $('.confirm').click(function () {   //
                                location.reload();
                            });
                        }
                    }
                });
            });
        });

    });
</script>