jquery toastr introduction

1.资源

http://www.jq22.com/jquery-info476

http://www.jq22.com/yanshi476

Nuget

Install-Package toastr

官网 http://codeseven.github.io/toastr/

2.简单使用步骤

Link to toastr.css

<link href="toastr.css" rel="stylesheet"/>

Link to toastr.js

<script src="toastr.js"></script>

use toastr to display a toast for info, success, warning or error

// Display an info toast with no title
toastr.info('Are you the 6 fingered man?')

3.BundleConfig

bundles.Add(new ScriptBundle("~/bundles/jquery")
                .Include("~/Scripts/jquery-{version}.js", "~/Scripts/toastr.min.js")
                );

bundles.Add(new StyleBundle("~/Content/css")
                .Include("~/Content/bootstrap.css", "~/Content/site.css")
                .Include("~/Content/toastr.min.css"));

4.abp集成

var abp = abp || {};
(function () {

    if (!toastr) {
        return;
    }

    /* DEFAULTS *************************************************/

    toastr.options.positionClass = 'toast-bottom-right';

    /* NOTIFICATION *********************************************/

    var showNotification = function (type, message, title, options) {
        toastr[type](message, title, options);
    };

    abp.notify.success = function (message, title, options) {
        showNotification('success', message, title, options);
    };

    abp.notify.info = function (message, title, options) {
        showNotification('info', message, title, options);
    };

    abp.notify.warn = function (message, title, options) {
        showNotification('warning', message, title, options);
    };

    abp.notify.error = function (message, title, options) {
        showNotification('error', message, title, options);
    };

})();