sweetalert api中文开发文档和手册

来源：互联网发布：java实现post请求编辑：程序博客网时间：2024/06/06 01:33

废话，目前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中文翻译是模态框 ,次文档为了理解容易，现在统一翻译为动态弹出框

参数默认值

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

方法举例

SweetAlert还提供了一些简单的方法，你可以调用：

方法例子

方法说明setDefaultsswal.setDefaults({ confirmButtonColor: '#0000' });如果你在调用SweetAlert时最终使用了很多相同的设置，你可以在程序的开始使用setDefaults来设置它们一次closeswal.close();以编程方式关闭当前打开的SweetAlertshowInputErrorswal.showInputError("Invalid email!");如果用户的数据不正确，请在验证输入字段后显示错误消息enableButtons, disableButtonsswal.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>

阅读全文

0 0