反馈已提交

网络繁忙

自定义滚动条插件

  • 文档创建者:jiangsr
  • 编辑次数:13次
  • 最近更新:Leo.Tsai 于 2021-07-20
  • 1. 概述

    1.1 版本

     报表服务器版本JAR 包要求 插件版本 
    10.02020-12-26V1.4.2

    1.2 应用场景

    IE 早期版本的浏览器跟随着发布系统的外观,与现有的设计器扁平化风格不统一,在冻结等特别模式中显得十分臃肿。效果如下图所示:

    1622613832219008.gif

    安装该插件后,滚动条样式被统一为灰色的长圆角矩形,并且会跟随鼠标滚轮滚动,会在空闲时自动隐藏,使界面变得简洁。效果如下图所示:

    1622613706232601.gif

    1.3 使用方法

    先安装插件,安装完之后无需配置或重启,新的滚动条样式立马生效,只要打开可以显示滚动条的模板就能看到。

    插件安装后,新的滚动条是作用于服务器下所有模板的,如果想要给模板单独自定义滚动条样式,可以用这个插件的 API 接口,添加 JavaScript 事件来实现。

    至于怎么使用 API 接口自定义滚动条样式,下面也会介绍。

    注:支持分页预览、填报预览、数据分析预览,但是不支持新填报预览。

    2. 操作演示

    2.1 安装插件

    点击下载插件:自定义滚动条

    设计器插件安装方法参照 设计器插件管理

    服务器安装插件方法参照 服务器插件管理

    2.2 打开模板

    插件安装后,直接打开内置模板:%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

    可以发现滚动条的样式变了,且鼠标静止一会后,滚动条会自动隐藏。

    1622614353288459.gif

    3. 自定义滚动条样式

    3.1 接口说明

    插件也提供了样式配置 API 接口,如果您对新滚动条样式还是不太满意,可以使用接口自定义这个插件滚动条的样式。

    API 文档如下:

    属性属性值类型默认值
    说明
    distancestring"1px"滚动条和窗口边界之间的距离
    sizestring"10px"滚动条的宽度大小
    alwaysVisiblebooleanfalse滚动条是否总是显示,设置成 false 的时候,鼠标停止移动后会逐渐消失
    colorstring"#000"滚动条的颜色
    axisstring"y"使用横向滚动条或者纵向滚动条,取值范围("x";"y";"both");暂时不支持自定义,使用报表的默认属性
    borderRadiusstring"7px"滚动条的圆角设置
    disableFadeOutbooleanfalse当鼠标悬停在页面上的时候,滚动条是否消失
    opacitynumber0.4设置滚动条的透明度,取值范围(0.0~1.0);
    positionXstring"bottom"设置横向滚动条在页面中的位置,取值范围("top", "bottom")
    positionYstring"right"设置纵向滚动条在页面中的位置,取值范围("left", "right")
    startXstring"left"设置横向滚动条初始化的时候页面滚动位置,取值范围("left", "right")
    startYstring"top"设置纵向滚动条初始化的时候页面滚动位置,取值范围("top", "bottom")
    wheelStepnumber60鼠标滚轮滚轮滚动一次的距离

    3.2 自定义示例

    1)这个接口是插件提供的,所以想要自定义滚动条样式,一定要安装这个插件。

    2)插件安装后,直接打开内置模板:%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

    3)在分页预览设置页面添加一个加载结束事件,如下图所示:

    1622615396249770.png

    JavaScript 代码如下:

    FR.Report.Plugin.ScrollProcessor.config = {
        alwaysVisible : true, //滚动条不会自动隐藏
        color : "red", //滚动条设置成红色
        size : "15px" //滚动条宽15px
    };

    4)保存模板,分页预览的效果如下图所示:

    1622615564893569.png

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\自定义插件滚动条样式.cpt

    点击下载模板:自定义插件滚动条样式.cpt

    注:预览这个模板需要提前安装好插件。

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭