光年模板说明文档
主题
字号
18px

光年模板的loading和消息(v3)

v3和v4版本中使用的loading是不一样的，这里着重讲一下v3的loading，至于v4的会放到插件整合项目里面去介绍。

注意：这里讲的是v3中的loading

从该文件的内容，不难看出其实就是一个全局的loading加载提示，不过该文件还封装了另一个消息提示的方法 notify，这里也会列出v3中的使用。

lightyear.loading('show');  // 显示
lightyear.loading('hide');  // 隐藏

loading的一些小改动

因为 iframe 版本的原因，在 iframe 里面的页面中使用，遮罩层只在 iframe 的范围，不太好看，这里稍微改下这个 js，加上 parent 即可。

loading的另一种改动方式

点击查看

通知消息

而在文件中封装的消息提示采用的是 bootstrap-notify 插件（封装方法来自DolphinPHP)，为了简化使用时候的写法，当然您也可以直接使用 bootstrap-notify 提供的方法。

参数 说明
$msg 提示信息
$type 提示类型： 'info', 'success', 'warning', 'danger'
$delay 定义消息提示消失的时间，毫秒数
$icon 图标，例如： 'mdi mdi-emoticon-happy'，具体参考图标
$from 'top' 或 'bottom'
$align 'left', 'right', 'center'
$url 跳转链接，$delay时间后跳转 
lightyear.notify('修改成功，页面即将自动跳转~', 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');

notify的一些小改动

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

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

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

修改 lightyear.js，同样加上parent即可。

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

notify的另一种改动方式

和加载等待动画一起改动，在不改动 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');

涉及的文件：