ABP框架下加入toastr提示框

ZABP框架是现成的后端.NET开发的框架，这里不再详细叙述。
本篇文章主要描述ABP的表示层的提示信息的使用。

一、Message消息提示框

目前系统中已集成了Message消息提示框，被用来向用户显示一个消息或者从用户那里得到一个确认。

消息API默认实现方式是使用了sweetalert库。使用时你需要引用sweetalert的样式和js，然后把 abp.sweet-alert.js 作为适配器包含到你的页面中。

用法是这样的：

abp.message.info("因为你总是不给我买糖吃！","我讨厌你！");
abp.message.warn("看到小偷在偷东西的时候大声喊了句","抓小偷");
abp.message.error("详细的错误信息是很多很多","出错了");
abp.message.success("恭喜您顺利通关！");
abp.message.confirm("确定要删除吗？",function(res){
    if(res){//true,点击确定按钮后执行的方法

    }else{//false,点击取消按钮后执行的方法

    }
});

效果是这样的：

 

 

 引入的文件有：

<link href="Abp/Framework/styles/abp.min.css" rel="stylesheet" />
<link href="Abp/Framework/dist/sweetalert.css" rel="stylesheet" />


<script src="Abp/Framework/scripts/abp.js"></script>
<script src="Abp/Framework/scripts/libs/abp.jquery.js"></script>
<script src="Abp/Framework/dist/sweetalert.js"></script>

<script src="Abp/Framework/scripts/libs/abp.sweet-alert.js"></script>

  二、UI Busy API 指示页面繁忙的API

如果是加载中，忙碌中，要用遮罩层，则使用，如下方式：

abp.ui.setBusy('#MyLoginForm');
abp.ui.clearBusy('#MyLoginForm');

第一个参数可以直接使用jquery选择器如’#id’或者使用jquery对象如$(‘#id’),如果传null或者‘body’则标记整个页面为繁忙状态，第二个参数可以接收一个promise，promise完成后会自动解除页面繁忙状态。

abp.ui.setBusy(
    $('#MyLoginForm'), 
    abp.ajax({ ... })   //返回值是promise，如果需要了解promise的更多信息，可以参考jQuery的 Deferred 
);

UI Busy API 使用的是spin.js，你需要在页面中引用spin.js和abp.spin.js。

<link href="Abp/Framework/styles/spin.css" rel="stylesheet" />

<script src="Abp/Framework/scripts/libs/spin.js"></script>
<script src="Abp/Framework/scripts/libs/jquery.spin.js"></script>

<script src="Abp/Framework/scripts/libs/abp.spin.js"></script>

三、UI Block API

这个API使用一个透明的遮罩层(透明度可调节)来遮住整个页面或者该页面的某个元素。因此用户不能够点击。当你保存表单或者加载某个区域时(某个层或者整个页面)，这是相当有用的。

如下所示：

abp.ui.block(); //遮住整个页面
abp.ui.block($('#MyDivElement')); //遮罩某个元素，在这里可以使用jQuery选择器选择元素..
abp.ui.block('#MyDivElement'); //..或者直接指定元素
abp.ui.unblock(); //解除遮罩
abp.ui.unblock('#MyDivElement'); //对指定元素解除遮罩

UI Block API 默认是使用jQuery插件block UI来实现的。为了能正常运行，你需要引用脚本文件，然后包含 abp.blockUI.js 文件作为适配器到你的页面中。

<link href="Abp/Framework/styles/abp.min.css" rel="stylesheet" />

<script src="Abp/Framework/scripts/abp.js"></script>
<script src="Abp/Framework/scripts/libs/abp.jquery.js"></script>

<script src="Abp/Framework/scripts/libs/jquery.blockUI.js"></script>
<script src="Abp/Framework/scripts/libs/abp.blockUI.js"></script>

四、toastr提示框

它是jquery的一款轻量级提示框插件toastr，能设置提示信息自动几秒钟消失，以什么动画方式展现。这个jquery通知插件toastr网址能设置toastr提示框的option配置项，自动生成代码。

（此处为借用别人博客上的图。 ）

toastr.消息类型（"消息内容","消息标题，可以省略"）

toastr.info("您的手机已经欠费！", "系统提醒");//提醒
toastr.success("恭喜获得冠军！", "恭喜");//成功
toastr.warning("您已经严重超速！", "警告");//警告
toastr.error("系统崩溃！", "错误");//错误
————————————————
版权声明：本文为优快云博主「机械键盘侠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/xuchen_wang/article/details/100558828



参数	说明
closeButton	显示关闭按钮
debug	开启debug模式
progressBar	显示进度条
onclick	鼠标点击事件
showDuration	显示动作时间
hideDuration	隐藏动作时间
timeOut	显示时间,0为永久显示
extendedTimeOut	鼠标移动过后显示显示时间
positionClass	
出现位置，有一下几种可以选择：

toast-top-left 顶端左边

toast-top-right 顶端右边

toast-top-center 顶端中间

toast-top-full-width 顶端，宽度铺满整个屏幕 toast-botton-right 

toast-bottom-left

toast-bottom-center

toast-bottom-full-width
————————————————
版权声明：本文为优快云博主「机械键盘侠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/xuchen_wang/article/details/100558828

 

toastr.options = {
 
            "closeButton": false, //是否显示关闭按钮
 
            "debug": false, //是否使用debug模式
 
            "positionClass": "toast-center-center",//弹出窗的位置
 
            "showDuration": "300",//显示的动画时间
 
            "hideDuration": "1000",//消失的动画时间
 
            "timeOut": "5000", //展现时间
 
            "extendedTimeOut": "1000",//加长展示时间
 
            "showEasing": "swing",//显示时的动画缓冲方式
 
            "hideEasing": "linear",//消失时的动画缓冲方式
 
            "showMethod": "fadeIn",//显示时的动画方式
 
            "hideMethod": "fadeOut" //消失时的动画方式
        };
————————————————
版权声明：本文为优快云博主「nuomizhende45」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/nuomizhende45/article/details/84205977

在ABP框架中引入toastr也是支持的，除了需要引入toastr.css和toastr.js外 ，还需要引入适配器abp.toastr.js。

<link href="Abp/Framework/styles/abp.min.css" rel="stylesheet" />
<link href="Abp/Framework/dist/toastr.min.css" rel="stylesheet" />

<script src="Abp/Framework/scripts/abp.js"></script>
<script src="Abp/Framework/scripts/libs/abp.jquery.js"></script>

<script src="Abp/Framework/dist/toastr.js"></script>


<script src="Abp/Framework/scripts/libs/abp.toastr.js"></script>

在对应要使用的地方，直接引入，要用notify即可：

abp.notify.success("保存成功！", "", { positionClass: "toast-center-center", "hideDuration": "1000" });

由于toastr的positionClass不支持居中显示提示框，故此搜到解决方案，在toastr.min.css中加入代码：

 .toast-center-center {
           top: 50%;
           left: 50%;
           margin-top: -30px;
           margin-left: -150px;
}

详细的ABP表示层相关文章，推荐看：ABP官方文档(三十九)【Notification,Message...】_abp.message_风神修罗使的博客-优快云博客