js-jquery-SweetAlert【一】使用

一、下载安装

地址：http://t4t5.github.io/sweetalert/

二、页面引用

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

当然还有jquery

三、示例

3.1、基础结构

<link rel="stylesheet" type="text/css" href="sweetalert.css">
<script src="jquery.min.js"></script> 
<script src="sweetalert.min.js"></script> 
<script>
window.onload=function(){
    swal("Here's a message!");//以下代码主要修改这里
}
</script>

3.2、精简用法

1、标题【alert】-swal（string）

swal("Here's a message!")

2、标题和描述【alert】-swal（string,string）

swal("Title","des")

3.标题、描述、成功【alert】-swal（string,string,string）

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

3.2、标准用法

4、确认框【confirm】-swal（object）

swal({   
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    closeOnConfirm: false 
});

其他参数见下表备注

5、确认框【confirm】-swal（object,function()）

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"); 
});

6、确认框【confirm】-swal（object,function(parameter)）

参数含义：是否确认isConfirm

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");
    }
});

 3.4、确认输出框

7、确认输出框确认框【confirm】-swal（object,function(parameter)）

注意：type：input

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");
});

3.5、ajax

8、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);
});

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/bjlhx/p/6695393.html