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++) { ...
随机推荐
- MyEclipse 10 下在线安装插件
昨天不知道怎么就删除了电脑中的eclipse 我x,还原不回来了. 今天就安装了最新版本的myeclipse10,大家都知道,MyEclipse 中有一个烦人的 Software and Worksp ...
- Oralce分析函数
1 列传行 listagg(city,',') within GROUP (order by city) over (partition by nation) rank with temp ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- C语言字节对齐问题详解
引言 考虑下面的结构体定义: typedef struct{ char c1; short s; char c2; int i; }T_FOO; 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始 ...
- 【.netcore基础】MVC制器Controller依赖注入
废话少说,直接上代码 首先我们得有一个接口类和一个实现类,方便后面注入MVC里 接口类 public interface IWeatherProvider { List<WeatherForec ...
- find中的-print0和xargs中-0的奥妙
原文地址:find中的-print0和xargs中-0的奥妙作者:改变自己 默认情况下, find 每输出一个文件名, 后面都会接着输出一个换行符 ('n'), 因此我们看到的 find 的输出都是一 ...
- 【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 ...
- kafka进阶
1. kafka整体结构图 Kafka名词解释和工作方式 Producer :消息生产者,就是向kafka broker发消息的客户端. Consumer :消息消费者,向kafka broker取消 ...
- 题目1004:Median(qsort函数自定义cmp函数)
题目链接:http://ac.jobdu.com/problem.php?pid=1004 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...
- 基本类型算法题目学习(EPI)
1.关于奇偶校验的方法中,如何快速的求取一个64-bit的数字的奇偶校验位.(如果1的位数为奇数,则奇偶校验位为1,如果1的位数为偶数,则奇偶校验位为0) a.暴力枚举法采用一位一位进行计算,一位一位 ...