一、下载安装

地址: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. 【正则表达式1】C++11正则表达式

    https://www.cnblogs.com/pukaifei/p/5546968.html [正则表达式1]C++11正则表达式   头文件 #include <regex> rege ...

  2. Linux IPC BSD Pipe

    mkfifo() //创建有名管道(FIFO special file),创建完了就像普通文件一样open(),再读写,成功返回0,失败返回-1设errno.VS$man 3 mkfifo #incl ...

  3. python框架---->BeautifulSoup的使用

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.一个人至少拥有一个梦想,有一个理由去坚强.心 ...

  4. icon VS html特殊字符

    好久没来了,最近项目很多,今天要说的是个页面上用到的icon. 话“icon” 现在有很多icon库,我们再也不用切图来适配不同的分辨率了,但是对于新手来说,查阅icon库来找到适合的icon,实在费 ...

  5. jQuery属性操作(三)

    在阅读attr.remove方法时,看到一些对浏览器兼容性做处理的hooks.接下来看一下这些hooks都做了哪些兼容性处理 1.attrHooks.主要处理IE6-9 input的type属性无法写 ...

  6. kafka进阶

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

  7. Elasticsearch学习之嵌套聚合,下钻分析,聚合分析

    1. 计算每个tag下的商品数量 GET /ecommerce/product/_search { "aggs": { "group_by_tags": { & ...

  8. openvpn 负载均衡方案

    这些方案的前提是,vpnserver的key都是一样的.方案1在openvpn客户端设两个配置文件,我们自己手动去连接去选择方案2在openvpn 的配置文件里面加个随机参数remote 8.8.8. ...

  9. jquery validate 多种使用方式

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

  10. 应急响应--记录一次漏洞紧急处理中意外发现的挖矿木马(Shiro反序列化漏洞和ddg挖矿木马)

    背景 某公司线上服务器意外发现一个Apache Shiro 反序列化漏洞,可以直接GetShell.出于做安全的谨慎,马上出现场应急,确认漏洞.该漏洞存在在cookie字段中的rememberMe字段 ...