前端框架之SweetAlert
简介
SweetAlert是一款很好用的弹出框框架
下载
导入
博主用的是bootstrap-sweetalert,所以要依赖bootstrap，导入前先导入原生jQuery以及bootstrap
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
基本样式
1、单条弹出框
swal("这是一条消息！");
2、删除警告框（取消时不提示）
swal({
title:'你确定删除吗？',
text:'一旦删除，将无法恢复！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'确定删除！',
closeOnConfirm:false
},
function(){
swal("删除","您的文件已经删除","success");
}
);
3、删除警告框（取消时提示）
swal({
title:'你确定删除吗？',
text:'一旦删除，将无法恢复！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'确定删除！',
cancelButtonText:'取消操作！',
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm){
if(isConfirm){
swal("删除！","您的文件已经被删除！",'success');
}else{
swal('取消！',"您的文件是依然存在！",'error');
}
}
)
4、带图片的弹出框
swal({
title:'Sweet!',
text:'送你一张图片',
imageUrl:'static/img/headpic/logo.png
' }); });
5、可插入html代码的弹出框
swal({
title:"<h1 style='font-size:16px'>此处可以插入html</h1>",
text:'我是<span style="color:#F8BB86">文字内容</span>',
html:true
})
6、自动关闭的弹出框
swal({
title:'自动关闭弹窗',
text:'设置弹窗在2秒后关闭',
timer:2000,
showConfirmButton:false
});
7、带输入框的弹出框
swal({
title:'获取输入框中的内容',
text:'写入一些有趣的东西吧：',
type:'input',
showCancelButton:true,
closeOnConfirm:false,
confirmButtonText:'确定',
cancelButtonText:'取消',
animation:'slide-from-top',
inputPlaceholder:'请输入一些内容'
},
function(inputValue){
if(inputValue==false) return false;
if(inputValue==''){
swal.showInputError('你必须写入一些东西');
return false;
}
swal('非常好','您输入的内容是：'+inputValue,'success');
}
);
8、可以提交AJAX请求的弹出框
swal({
title:'ajax请求例子',
text:'提交ajax请求',
type:'info',
showCancelButton:true,
closeOnConfirm:false,
showLoaderOnConfirm:true
},
function(){
setTimeout(function(){
swal("ajax请求完成");
},2000);
}
);
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<style> </style>
</head>
<body>
<button id="btn01">点我弹出</button>
<button id="btn02">点我弹出</button>
<button id="btn03">点我弹出</button>
<button id="btn04">点我弹出</button>
<button id="btn05">点我弹出</button>
<button id="btn06">点我弹出</button>
<button id="btn07">点我弹出</button>
<button id="btn08">点我弹出</button>
<script>
$("#btn01").click(function(){
swal("这是一条消息！");
});
$("#btn02").click(function(){
swal({
title:'你确定删除吗？',
text:'一旦删除，将无法恢复！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'确定删除！',
closeOnConfirm:false
},
function(){
swal("删除","您的文件已经删除","success");
}
);
});
$("#btn03").click(function(){
swal({
title:'你确定删除吗？',
text:'一旦删除，将无法恢复！',
type:'warning',
showCancelButton:true,
confirmButtonColor:'#DD6B55',
confirmButtonText:'确定删除！',
cancelButtonText:'取消操作！',
closeOnConfirm:false,
closeOnCancel:false
},
function(isConfirm){
if(isConfirm){
swal("删除！","您的文件已经被删除！",'success');
}else{
swal('取消！',"您的文件是依然存在！",'error');
}
}
)
});
$("#btn04").click(function(){
swal({
title:'Sweet!',
text:'送你一张图片',
imageUrl:'node_modules/sweetalert/example/images/thumbs-up.jpg'
});
});
$("#btn05").click(function(){
swal({
title:"<h1 style='font-size:16px'>此处可以插入html</h1>",
text:'我是<span style="color:#F8BB86">文字内容</span>',
html:true
})
});
$("#btn06").click(function(){
swal({
title:'自动关闭弹窗',
text:'设置弹窗在2秒后关闭',
timer:2000,
showConfirmButton:false
});
});
$("#btn07").click(function(){
swal({
title:'获取输入框中的内容',
text:'写入一些有趣的东西吧：',
type:'input',
showCancelButton:true,
closeOnConfirm:false,
confirmButtonText:'确定',
cancelButtonText:'取消',
animation:'slide-from-top',
inputPlaceholder:'请输入一些内容'
},
function(inputValue){
if(inputValue==false) return false;
if(inputValue==''){
swal.showInputError('你必须写入一些东西');
return false;
}
swal('非常好','您输入的内容是：'+inputValue,'success');
}
);
});
$("#btn08").click(function(){
swal({
title:'ajax请求例子',
text:'提交ajax请求',
type:'info',
showCancelButton:true,
closeOnConfirm:false,
showLoaderOnConfirm:true
},
function(){
setTimeout(function(){
swal("ajax请求完成");
},2000);
}
);
});
</script>
</body>
</html>
前端框架之SweetAlert的更多相关文章
- 前端框架Bootstrap（10.7国庆补写）
框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
- 10大H5前端框架
作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...
- Web前端框架与类库的思考
说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...
- React 还是 Vue: 你应该选择哪一个Web前端框架？
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架：
19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...
- Web前端框架汇总
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
- 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com
近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...
- 如何选择前端框架：ANGULAR VS EMBER VS REACT
最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...
随机推荐
- QListView和QListWidget的区别
QListView是基于Model,而QListWidget是基于Item.这是它们的本质区别. 往QListView中添加条目需借助QAbstractListModel: 如: MainWindow ...
- 虚拟化–操作系统级 LXC Linux Containers内核轻量级虚拟化技术
友情提示:非原文链接可能会影响您的阅读体验,欢迎查看原文.(http://blog.geekcome.com) 原文地址:http://blog.geekcome.com/archives/288 软 ...
- 数学分析 + 容斥原理 - URAL 1907 Coffee and Buns
Coffee and Buns Problem's Link: http://www.bnuoj.com/v3/contest_show.php?cid=6415#problem/H Mean: 给定 ...
- ci 框架插入时返回插入的id号
$this->db->insert('goods',$data); $gid=$this->db->insert_id('goods'); return $gid;
- BI开发之——Mdx基础语法(2)(转至指尖流淌)
结合webcast中老师的讲解,现在把基础语法应用通过几个案例应用如下: 一.维度的概念 上图中一个维度(Dimension):Region 改为度下有四个级别(Levels):country.pro ...
- 第二百八十节，MySQL数据库-外键链表之一对多，多对多
MySQL数据库-外键链表之一对多,多对多 外键链表之一对多 外键链表:就是a表通过外键连接b表的主键,建立链表关系,需要注意的是a表外键字段类型,必须与要关联的b表的主键字段类型一致,否则无法创建索 ...
- poj 1090:The Circumference of the Circle（计算几何，求三角形外心）
The Circumference of the Circle Time Limit: 2 Seconds Memory Limit: 65536 KB To calculate the c ...
- ionic跳转（二）
1)网上说要想在js里跳转用,$state.go()方法,但找了大半天都没找到在ionic使用$state的方法 2)要想用js跳转,直接用原生js跳转也是可以的 location.href='#ho ...
- Oracle中select使用别名
1 .将字段用as转换成别名. 2 .直接在字段的名字后面跟别名. 3 .在字段后面用双引号引起的别名. 我的朋友 大鬼不动 最近访客 fhwlj kochiyas 大極星 Alz__ deser ...
- shell脚本学习总结01--文件描述符和重定向
文件描述符是与文件输入和输出的相关联的整数,它们用来追踪已打开的文件,文件描述符0,1,2是系统预留的. 0 --> stdin (标准输入) 1 --> stdout (标准输出) 2 ...