首页 技术 正文
技术 2022年11月23日
0 收藏 500 点赞 2,242 浏览 2231 个字

一、下载安装

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

二、页面引用

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

当然还有jquery

三、示例

3.1、基础结构

<link rel="stylesheet" type="text/css" href="sweetalert.css" rel="external nofollow" >
<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.zhankr.net/141829.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:4,994
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,472
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,281
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,282
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,840
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,072
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站