倒计时消息提示框

  • 文档创建者:星踪
  • 编辑次数:6次
  • 最近更新:Leo.Tsai 于 2020-07-24
  • 1. 概述

    1.1 预期效果

    FineReport 自带的提示框样式比较单一,例如填报校验的提示框,如下图所示:

    Snag_59f7140.png

    可以通过引入一些 JS 和 CSS 来做出个性化的效果,如下图所示:

    1595569310129343.gif

    1.2 实现思路

    • 如果是 cpt 报表,直接在模板 Web 属性中引入外部 JavaScript 和 CSS 。

    • 如果是 frm 报表,需要在 body 初始化事件中写外部 JavaScript 和 CSS 引用。

    2. 示例

    2.1 下载文件

    1)点击下载 JavaScript 和 CSS 文件:

    notice.js

    animate.css

    noticejs.css

    2)将 3 个文件放到%FR_HOME%\webroot\help\css目录下,如下图所示:

    1595570458259576.png

    2.2 引用文件

    1)新建普通报表,设计器菜单栏点击模板>模板Web属性,打开的页面点击引用JavaScript,将上面的 1 个 JavaScript 文件引用到报表中,如下图所示:

    1595570830725876.png

    2)点击引用CSS,将上面的 2 个 CSS 文件引用到报表中,如下图所示:

    1595570846108154.png

    2.3 设计表格

    B2、D2、F2、H2 单元格都添加按钮控件,按钮名字分别设置为:success、info、warning、error,如下图所示:

    Snag_5c107b4.png

    2.4 添加事件

    分别给表格中的 4 个按钮添加点击事件,触发弹出提示框的操作,如下图所示:

    Snag_5c89b76.png

    1)B2 单元格按钮点击事件 JavaScript 代码如下:

    new NoticeJs({
    title: '',
    type: 'success',
    text: '填报成功',
    position: 'topCenter',
    closeWith: ['button','click'],
    timeout: 30,
    modal: false,
    progressBar: true,
    callbacks: {
    beforeShow: [],
    onShow: [],
    afterShow: [],
    onClose: [],
    afterClose: [],
    onClick: [],
    onHover: [function() {
    console.log("success");
    }]
    },
    animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutLeft'
    }
    }).show()

    2)D2 单元格按钮点击事件 JavaScript 代码如下:

    new NoticeJs({
    type: 'info',
    text: '填报进行中,暂时不可操作',
    position: 'topCenter',
    timeout: 30,
    modal: true,
    animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutLeft'
    }
    }).show()

    3)F2 单元格点击事件 JavaScript 代码如下:

    new NoticeJs({
    type: 'warning',
    text: '重复提交',
    timeout: 30,
    animation: {
    open: 'animated bounceIn',
    close: 'animated bounceOut'
    }
    }).show()

    4)H2 单元格点击事件 JavaScript 代码如下:

    new NoticeJs({
    type: 'error',
    text: '填报失败',
    position: 'topCenter',
    timeout: 30,
    animation: {
    open: 'animated flipInX',
    close: 'animated flipoutX'
    }
    }).show()

    2.5 效果预览

    保存报表,点击填报预览,效果如下图所示:

    1595569310129343.gif

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\倒计时消息提示框.cpt

    点击下载模板:

    倒计时消息提示框.cpt

    点击下载JavaScript 和CSS 文件:

    animate.css

    notice.js

    noticejs.css

    4. 注意事项

    4.1 frm 报表实现方法

    frm 报表需要在 body 初始化事件中写 JavaScript 引入,其他操作同上面 cpt 报表的实现方法,如下图所示:

    Snag_5d58f41.png

    JavaScript 代码如下:

    function dynamicLoadCss(url) {
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;
        head.appendChild(link);
    }
     
    function dynamicLoadJs(url) {
        var oHead = document.getElementsByTagName('head').item(0);
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.src = url;
        oHead.appendChild(oScript);
    }
     
    dynamicLoadCss("/webroot/help/css/noticejs.css");
    dynamicLoadCss("/webroot/help/css/animate.css");
    //引入css
    dynamicLoadJs("/webroot/help/css/notice.js");
    //引入js

    4.2 Notice.js 参数说明

    名称
    类型默认值说明
    type
    Stringsuccess
    根据状态决定提示框的背景色,共四种:success,info,error,warning
    title
    String标题文字
    timeout
    Number30提示框停留时间,30代表3s
    text
    String内容文字
    progressBar
    Booleantrue是否显示倒计时条,true代表显示,false代表不显示
    position
    StringtopRight
    提示框停留的不同位置,共九种:topLeft,topCenter,topRight,middleLeft,middleCenter,middleRight,bottomLeft,bottomCenter,bottomRight
    modal
    Booleanfalse决定弹出提示框后,页面主体还能否操作。true代表不能,false代表能
    closeWith
    Array
    ['button']
    手动关闭提示框的方式,共两种:button,click。两种方式可以共用,即:['button','click']
    callback
    Json回调事件,可在提示框弹出的过程中,自定义JS方法
    animation
    Json提示框出现和消失的动画,有多种选项可供选择,自由搭配,详见下面的第4点

    4.3 动画效果

    open
    close效果图
    animated bounceInRightanimated bounceOutLeft
    animated bounceInanimated bounceOut
    animated fadeInanimated fadeOut
    animated lightSpeedInanimated lightSpeedOut
    animated zoomInanimated zoomOut
    animated flipInXanimated flipOutX
    animated rollInanimated rollOut


    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!