对于一些特殊的模板,可能为了展示的更加丰富、全面会在一个页面放置很多图表。表格等内容。由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到JS滚屏效果来解决,这里主要介绍在FineReport中的具体制作方法。

添加加载结束事件

点击菜单模板>模板web属性>分页预览设置,选择“为该模板单独设置”,添加一个“加载结束”后事件,如下图所示:

JS代码如下:

保存模板,点击分页预览,就会出现上面的自动滚动效果。如果想要停止滚动的话,用鼠标左键点击一下窗口即可。

FineReport中如何实现自动滚屏效果的更多相关文章

  1. 帆软报表(finereport)实现自动滚屏效果

    例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...

  2. jquery实现自动滚屏效果,适用用公告新闻等滚屏

    从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> ...

  3. 基于 ECharts 封装甘特图并实现自动滚屏

    项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...

  4. jQuery实现 自动滚屏操作

    实现自动滚屏思路: 1.滚屏即:文本的往上移动一段距离: 2.那么我们使文本每过一段时间就往上移动一段固定距离,就可实现滚屏: 3.直到文本底部出现在浏览器窗口中,专业点就是 文本移动的距离 + 浏览 ...

  5. javascript实现页面滚屏效果

    当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析.本示例在页面右侧有五个数字标签,代表五个 ...

  6. js中网页图片自动更换的效果

    <script> var arr=new Array(); arr[]="url(images/city.jpg)"; arr[]="url(images/d ...

  7. js实现双击滚屏效果

    <body onDblClick="s=setInterval('scrollBy(0,2)',50)" onMousedown="clearInterval(s) ...

  8. 利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果

    参考链接:https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search. */

  9. js手机滚屏效果

    原文地址:https://github.com/yanhaijing/zepto.fullpage 第一步:基于移动端的浏览体验,在头部添加浏览器渲染的分辨率 <meta name=" ...

随机推荐

  1. POJ 1013

    #include"string.h"char left[3][7],right[3][7],result[3][5];bool isHeavy(char x ){    int i ...

  2. POJ 1056

    #include <iostream> #include <string> #define MAXN 50 using namespace std; struct node { ...

  3. JSON JSONPath

    JSONPath is a query language for JSON, similar to XPath for XML. AlertSite API endpoint monitors let ...

  4. eclipseGUI的可视化开发工具插件

    一   各种GUI开发插件的特色 Eclipse并不自带GUI的可视化开发工具,那么如果要在Eclipse进行可视化的GUI开发,就需要依靠第三方的插件. 1. Visual Editor Eclip ...

  5. phpdocumentor生成代码注释文档(linux)

    1,默认安装lnmp环境(php7),默认pear安装 2,   pear channel-discover pear.phpdoc.org pear install phpdoc/phpDocume ...

  6. Chapter 3 Phenomenon——3

    It took every ounce of my concentration to make it down the icy brick driveway alive. 我用所有我的注意力去确定车道 ...

  7. Redis笔记(二):Redis数据类型

    Redis 数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) st ...

  8. tomcat启动(一)startup.bat|catalina.bat分析

    环境:windows X64位 Tomcat8.0.47 bootstrap.jar是tomcat的内核 开始位置 startup.bat 查看文本 具体的批处理脚本语法可以查看我整理的文章 http ...

  9. 下载Windows版本的Redis

    1.打开官网http://redis.io/点击Download 2.往下拉,找到Windows, 由图片中的文字可以看出Redis项目不正式支持Windows. 但是,Microsoft开放技术小组 ...

  10. 默 of 2018:年终总结

    目录 1 概述:在平凡中求变 2 专业分流:一个时代的终点,我的新起点 2.1 我在专业分流前夕的境况 2.2 专业分流情况概述,以及对一篇文章的回顾 2.3 总结与余绪 2.4 附:关于理科与工科的 ...