在网上还找到一个效果比较炫一点的提示框:sweetalert
要使用它,还是老规矩:Nuget。
(1)文档
(2)在cshtml页面引入js和css
<link href="~/Styles/sweetalert.css" rel="stylesheet" />
<script src="~/Scripts/sweetalert.min.js"></script>
swal({
title:"操作提示", //弹出框的title
text:"确定删除吗?",//弹出框里面的提示文本
type:"warning", //弹出框类型
showCancelButton:true,//是否显示取消按钮
confirmButtonColor:"#DD6B55",//确定按钮颜色
cancelButtonText:"取消",//取消按钮文本
confirmButtonText:"是的,确定删除!",//确定按钮上面的文档
closeOnConfirm:true
},function() {
$.ajax({
type:"post",
url:"/Home/Delete",
data: { "": JSON.stringify(arrselections) },
success:function(data, status) {
if(status == "success") {
toastr.success('提交数据成功');
$("#tb_departments").bootstrapTable('refresh');
}
},
error:function() {
toastr.error('Error');
},
complete:function() {
}
});
});
(4)效果展示:
点击确定后进入回调函数:
组件很多,用哪种园友没可以自行决定,不过博主觉得像一些互联网、电子商务类型的网站用sweetalert效果比较合适,一般的内部系统可能也用不上。
三、操作完成提示框
1、toastr.js组件
关于信息提示框,博主项目中使用的是toastr.js这么一个组件,这个组件最大的好处就是异步、无阻塞,提示后可设置消失时间,并且可以将消息提示放到界面的各个地方。先来看看效果。
显示在不同位置:
top-center位置
bottom-left位置
关于它的使用。
(1)、引入js和css
(2)、js初始化
将这个属性值设置为不同的值就能让提示信息显示在不同的位置,如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等,更过位置信息请查看文档。
(3)、使用
使用起来就如下一句:
toastr.warning('只能选择一行进行编辑');
是不是很简单~~这里的有四种方法分别对应四种不同颜色的提示框。
toastr.success('提交数据成功');
toastr.error('Error');
toastr.warning('只能选择一行进行编辑');
toastr.info('info');
分别对应上图中的四种颜色的提示框。
2、Messenger组件
在Bootstrap中文网里面提到了一个alert组件:Messenger。
它的使用和toastr.js这个组件基本相似,只不过效果有点不太一样。我们还是来看看它是如何使用的。
(1)效果展示
可以定位到网页的不同位置,例如下图中给出的下中位置、上中位置。
提示框的样式有三种状态:Success、Error、Info
并且支持四种不同样式的提示框:Future、Block、Air、Ice
(2)组件使用以及代码示例
关于它的使用和toastr大同小异,首先引入组件:
初始化它的位置
然后js里面使用如下:
如果提示框使用默认样式,也只有一句就能解决
很简单很强大有木有~~
SweetAlert详解
官方给出的SweetAlert介绍是:SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。我用过之后觉得确实好用,因此极力推荐此插件。我将它的用法总结如下:
弹出一个alert的写法:
其一: swal("恭喜","添加成功","success"); 第一个参数是title,第二个参数是text,第三个参数是提醒类型(success,error,warning,input),三个参数皆非必写项。最简便写法:swal("");就弹出一个框,上面有个确定按钮。不可写作:
swal();
其二:
swal({
title:"恭喜",
text:"添加成功",
type:"success"
});
参数还可以写:
html:是否支持html,默认false,写成true以后,text里就可以写html元素。下面给一个例子
showCancelButton:是否显示取消按钮;
animation:提示框弹出时的动画效果,可选(pop、none、slide-from-top、slide-from-bottom);
timer:设置自动关闭提示框时间(毫秒);
showConfirmButton:是否显示确定按钮;
confirmButtonText:定义确定按钮文本;
cancelButtonText:定义取消按钮文本;
imageUrl:定义弹出框的图片地址;
回调函数:done()和error.
下面给出一个confirm窗体带回调函数的例子: