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">

安装

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

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

页面加载后调用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>

posted on 2016-10-29 21:56 zh7314 阅读(20316) 评论(1) 编辑收藏举报

刷新页面返回顶部

ZX

sweetalert api中文开发文档和手册

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

安装

配置

方法举例

导航