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);
});
js-jquery-SweetAlert【一】使用的更多相关文章
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- js jquery 选择器总结
js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- 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 ...
- js jquery中 的数据类型
任何一门语言, buguan 是动态的, 还是像C语言的, 都有严格的 类型 "概念的", 这个是由于 编译器和解释器要求的, 需要的. 所以在是使用像 js, jquey ,ph ...
- paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
paip.提升效率--数据绑定到table原理和流程Angular js jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----An ...
- JS Jquery去除数组重复元素
js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...
随机推荐
- 【正则表达式1】C++11正则表达式
https://www.cnblogs.com/pukaifei/p/5546968.html [正则表达式1]C++11正则表达式 头文件 #include <regex> rege ...
- Linux IPC BSD Pipe
mkfifo() //创建有名管道(FIFO special file),创建完了就像普通文件一样open(),再读写,成功返回0,失败返回-1设errno.VS$man 3 mkfifo #incl ...
- python框架---->BeautifulSoup的使用
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.一个人至少拥有一个梦想,有一个理由去坚强.心 ...
- icon VS html特殊字符
好久没来了,最近项目很多,今天要说的是个页面上用到的icon. 话“icon” 现在有很多icon库,我们再也不用切图来适配不同的分辨率了,但是对于新手来说,查阅icon库来找到适合的icon,实在费 ...
- jQuery属性操作(三)
在阅读attr.remove方法时,看到一些对浏览器兼容性做处理的hooks.接下来看一下这些hooks都做了哪些兼容性处理 1.attrHooks.主要处理IE6-9 input的type属性无法写 ...
- kafka进阶
1. kafka整体结构图 Kafka名词解释和工作方式 Producer :消息生产者,就是向kafka broker发消息的客户端. Consumer :消息消费者,向kafka broker取消 ...
- Elasticsearch学习之嵌套聚合,下钻分析,聚合分析
1. 计算每个tag下的商品数量 GET /ecommerce/product/_search { "aggs": { "group_by_tags": { & ...
- openvpn 负载均衡方案
这些方案的前提是,vpnserver的key都是一样的.方案1在openvpn客户端设两个配置文件,我们自己手动去连接去选择方案2在openvpn 的配置文件里面加个随机参数remote 8.8.8. ...
- jquery validate 多种使用方式
前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...
- 应急响应--记录一次漏洞紧急处理中意外发现的挖矿木马(Shiro反序列化漏洞和ddg挖矿木马)
背景 某公司线上服务器意外发现一个Apache Shiro 反序列化漏洞,可以直接GetShell.出于做安全的谨慎,马上出现场应急,确认漏洞.该漏洞存在在cookie字段中的rememberMe字段 ...