手机端弹出提示框,最好用的移动端提示框SweetAlert 插件

在网上还找到一个效果比较炫一点的提示框:sweetalert

 

要使用它,还是老规矩:Nuget。

(1)文档

(2)在cshtml页面引入js和css

    <link href="~/Styles/sweetalert.css" rel="stylesheet" />
    <script src="~/Scripts/sweetalert.min.js"></script>

(3)js使用

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 

?
[html]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <link href="~/Content/toastr/toastr.css"rel="stylesheet"/>  
  2. <script src="~/Content/toastr/toastr.min.js"></script>  

(2)、js初始化

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript">  
  2.   toastr.options.positionClass = 'toast-bottom-right';  
  3.  </script>  

?

将这个属性值设置为不同的值就能让提示信息显示在不同的位置,如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等,更过位置信息请查看文档。

(3)、使用

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. //初始化编辑按钮  
  2. $("#btn_edit").click(function() {  
  3.    vararrselections = $("#tb_departments").bootstrapTable('getSelections');  
  4.    if(arrselections.length > 1) {  
  5.     toastr.warning('只能选择一行进行编辑');  
  6.    
  7.     return;  
  8.    }  
  9.    if(arrselections.length <= 0) {  
  10.     toastr.warning('请选择有效数据');  
  11.    
  12.     return;  
  13.    }  
  14.       
  15.    $('#myModal').modal();  
  16.   });  


?

使用起来就如下一句:

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大同小异,首先引入组件:

?
1
2
3
<script src= "~/Content/HubSpot-messenger-a3df9a6/build/js/messenger.js" ></script>
  <link href= "~/Content/HubSpot-messenger-a3df9a6/build/css/messenger.css" rel= "stylesheet" />
  <link href= "~/Content/HubSpot-messenger-a3df9a6/build/css/messenger-theme-future.css" rel= "stylesheet" />

初始化它的位置

?
1
2
3
4
5
<script type= "text/javascript" >
  $._messengerDefaults = {
   extraClasses: 'messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right'
  }
</script>

然后js里面使用如下:

?
1
2
3
4
5
6
7
8
9
$( "#btn_delete" ).click( function () {
   $.globalMessenger().post({
    message: "操作成功" , //提示信息
    type: 'info' , //消息类型。error、info、success
    hideAfter: 2, //多长时间消失
    showCloseButton: true , //是否显示关闭按钮
    hideOnNavigate: true //是否隐藏导航
  });
});

如果提示框使用默认样式,也只有一句就能解决 

?
1
2
3
4
$.globalMessenger().post({
    message: "操作成功" , //提示信息
    type: 'info' , //消息类型。error、info、success
  });

很简单很强大有木有~~



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窗体带回调函数的例子:

[javascript]  view plain  copy
  1. function deleteArticle(id){  
  2.        var serverAddress=serverAddressPath+'/api/arc/delete.shtml';  
  3.        swal({  
  4.           title:"",  
  5.           text:"确定删除吗?",  
  6.           type:"warning",  
  7.           showCancelButton:"true",  
  8.           showConfirmButton:"true",  
  9.           confirmButtonText:"确定",  
  10.           cancelButtonText:"取消",  
  11.           animation:"slide-from-top"  
  12.         }, function() {  
  13.                var ids=new Array();  
  14.         ids.push(id+"");  
  15.         $.ajax({  
  16.             type:"post",  
  17.             url:serverAddress,  
  18.             traditional: true,  
  19.             dataType:"json",  
  20.             data:{"id":ids}  
  21.         }).done(function(data) {  
  22.                   swal("操作成功!""已成功删除数据!""success");  
  23.                   getMyArtic();  
  24.                }).error(function(data) {  
  25.                   swal("OMG""删除操作失败了!""error");  
  26.                });  
  27.          });  
  28.       }  
        






版权声明:本文为博主原创文章,未经博主允许不得转载。




  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值