通知消息

项目中使用的通知消息插件是bootstrap-notify，阅读文档

介绍
一些改动

介绍

项目里使用的版本是v3.1.3，示例的页面中使用到的是稍微做了一些封装，如果需要使用到更多一些功能的小伙伴，可以查看原生的文档。

封装的代码位于：/js/lightyear.js


var tips = function ($msg, $type, $delay, $icon, $from, $align) {
    $type  = $type || 'info';
    $delay = $delay || 1000;
    $from  = $from || 'top';
    $align = $align || 'center';
    $enter = $type == 'danger' ? 'animated shake' : 'animated fadeInUp';

    jQuery.notify({
        icon: $icon,
        message: $msg
    },
    {
        element: 'body',
        type: $type,
        allow_dismiss: true,
        newest_on_top: true,
        showProgressbar: false,
        placement: {
            from: $from,
            align: $align
        },
        offset: 20,
        spacing: 10,
        z_index: 10800,
        delay: $delay,
        //timer: 1000,
        animate: {
            enter: $enter,
            exit: 'animated fadeOutDown'
        }
    });
};

参数	说明
$msg	提示信息
$type	提示类型：'info', 'success', 'warning', 'danger'
$delay	定义消息提示消失的时间，毫秒数
$icon	图标，例如：'mdi-emoticon-happy'，具体参考项目中的图标页面
$from	'top' 或 'bottom'
$align	'left', 'right', 'center'


lightyear.notify('修改成功，页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');

一些改动

跟loading一样的问题，这个消息提示在iframe里面的页面中使用，也只是在iframe范围内，这里也可以做一些变动。

首先：需要把引入的插件和样式，放到最外层index.html里面。


<link href="css/animate.css" rel="stylesheet">
<script src="js/bootstrap-notify.min.js"></script>

同样加上parent即可。


/* 省略... */
    parent.jQuery.notify({
        icon: $icon,
        message: $msg
    }
/* 省略... */

另一种改动方式

和加载等待动画一起改动，在不改动 lightyrea.js 的前提下，把 lightyear.js 、animate.css 和 bootstrap-notify.min.js 的引入挪到index.html页面中，iframe的页面里不再引入这些，在iframe里面调用加上 parent。


parent.lightyear.loading('show');
parent.lightyear.loading('hide');
parent.lightyear.notify('修改成功，页面即将自动跳转~', 'success');