一、下载安装

地址: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);
});
												

js-jquery-SweetAlert【一】使用的更多相关文章

  1. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  2. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  3. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  4. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  5. js jquery 选择器总结

    js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...

  6. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  7. spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...

    问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...

  8. js jquery中 的数据类型

    任何一门语言, buguan 是动态的, 还是像C语言的, 都有严格的 类型 "概念的", 这个是由于 编译器和解释器要求的, 需要的. 所以在是使用像 js, jquey ,ph ...

  9. paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

    paip.提升效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----An ...

  10. JS Jquery去除数组重复元素

    js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...

随机推荐

  1. MyEclipse 10 下在线安装插件

    昨天不知道怎么就删除了电脑中的eclipse 我x,还原不回来了. 今天就安装了最新版本的myeclipse10,大家都知道,MyEclipse 中有一个烦人的 Software and Worksp ...

  2. Oralce分析函数

    1 列传行  listagg(city,',')  within GROUP (order by city)    over (partition by nation) rank with temp ...

  3. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. C语言字节对齐问题详解

    引言 考虑下面的结构体定义: typedef struct{ char c1; short s; char c2; int i; }T_FOO; 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始 ...

  5. 【.netcore基础】MVC制器Controller依赖注入

    废话少说,直接上代码 首先我们得有一个接口类和一个实现类,方便后面注入MVC里 接口类 public interface IWeatherProvider { List<WeatherForec ...

  6. find中的-print0和xargs中-0的奥妙

    原文地址:find中的-print0和xargs中-0的奥妙作者:改变自己 默认情况下, find 每输出一个文件名, 后面都会接着输出一个换行符 ('n'), 因此我们看到的 find 的输出都是一 ...

  7. 【Spring Boot && Spring Cloud系列】Spring Boot的启动器Starter

    Spring Boot的内置Servlet Container: Name Servlet Version Java Version Tomcat8 3.1 Java 7+ Tomcat7 3.0 J ...

  8. kafka进阶

    1. kafka整体结构图 Kafka名词解释和工作方式 Producer :消息生产者,就是向kafka broker发消息的客户端. Consumer :消息消费者,向kafka broker取消 ...

  9. 题目1004:Median(qsort函数自定义cmp函数)

    题目链接:http://ac.jobdu.com/problem.php?pid=1004 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  10. 基本类型算法题目学习(EPI)

    1.关于奇偶校验的方法中,如何快速的求取一个64-bit的数字的奇偶校验位.(如果1的位数为奇数,则奇偶校验位为1,如果1的位数为偶数,则奇偶校验位为0) a.暴力枚举法采用一位一位进行计算,一位一位 ...